We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

CSS question: three equally wide divs (33.3%) with two 2px gaps between them

    • 26931
    • 2,314 Posts
    anonymized-26931 Reply #11, 16 years, 8 months ago
    Have you found solution to your problem if not you could try
    to modify (by changing %’s) in http://matthewjamestaylor.com/blog/perfect-3-column.htm percentage view
    thanks allanb!
    the percentage problem seems to be solved, ran into another problem though...each panel probably needs to have a sticky footer http://bit.ly/76R4vi and the overlay doesn’t expand according to the content block http://bit.ly/880doR
    oh dear smiley gave it a rest for a while
      • 22840
      • 1,572 Posts
      Paulp Reply #12, 16 years, 8 months ago
      If I understand this correct are you wanting the footer to be at the bottom of each of the 3 sections but in exacley the same place on the page.

      If so you will need to use javascript to set the content div the same height as the highest one and then just put the footers under it, Nifty corners can do this ( just google it ) or I’m sure theres a jquery solution.

      If thats not the issue can you explain more to what you actually want and I can probable sort it for you.
        • 26931
        • 2,314 Posts
        anonymized-26931 Reply #13, 16 years, 8 months ago
        If I understand this correct are you wanting the footer to be at the bottom of each of the 3 sections but in exacley the same place on the page.
        yes. and it should stay there without content, too. the standard scenario would only show one panel...but there might be a case when i need to display two, or even three
        If so you will need to use javascript to set the content div the same height as the highest one and then just put the footers under it, Nifty corners can do this ( just google it ) or I’m sure theres a jquery solution.
        i’ll try the jQuery version found here: http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
        problem might also be due to some funky overflows i have to use because of the resizeable bg, but give it a try
        If thats not the issue can you explain more to what you actually want and I can probable sort it for you.
        thanks, that’s very kind of you smiley i’ll report back how it goes. actually i didn’t come up with this setup, it’s for a friends project, and he didn’t think all possibilities through
          • 22840
          • 1,572 Posts
          Paulp Reply #14, 16 years, 8 months ago
          yes. and it should stay there without content, too. the standard scenario would only show one panel...but there might be a case when i need to display two, or even three

          That shouldn’t be a problem, just set a outer div for each column and set the equal height to that, IE:

          <!-- first col -->
<div class="outer-wrap">
<div class="content-1"></div>
<div class="content-2"></div>
<div class="content-3"></div>
</div>
<!-- ends outer wrap that set the heights -->

<!-- second col -->
<div class="outer-wrap">
<div class="content-1"></div>
</div>
<!-- ends outer wrap that set the heights -->

<!-- third col -->
<div class="outer-wrap">
<div class="content-1"></div>
<div class="content-2"></div>
</div>
<!-- ends outer wrap that set the heights -->


          then set the equal height to .outer-wrap, the footer on each should then sit at the bottom of the highest outerwrap and the bg world work as normal.
            • 26931
            • 2,314 Posts
            anonymized-26931 Reply #15, 16 years, 8 months ago
            thanks, i’ll try that btw. each panel should have it’s own footer. it’s not displayed in the demo

            so the footer would be placed like:
            <!-- third col -->
<div class="outer-wrap">
<div class="content-1"></div>
<div class="content-2"></div>
<div class="footer"></div>
</div>
<!-- ends outer wrap that set the heights -->
              • 22840
              • 1,572 Posts
              Paulp Reply #16, 16 years, 8 months ago
              Nope, display it like this:

              <!-- third col -->
<div class="outer-wrap">
<div class="content-1"></div>
<div class="content-2"></div>
</div>
<!-- ends outer wrap that set the heights -->
<div class="footer"></div>


              As you are setting the equal height on the outer-wrap you need the footer to be below the closing div for it
                • 26931
                • 2,314 Posts
                anonymized-26931 Reply #17, 16 years, 8 months ago
                thanks smiley
                  • 1169
                  • 312 Posts
                  allanb Reply #18, 16 years, 8 months ago
                  The link I gave you only uses css and xhtml to achieve same.

                  Regards Allan
                    DEVELOPMENT ENV:- Ubuntu 12.04 | MODx Revolution 2.2.8 | LAMP 2i Apache 2.2.22 | Php 5.3.10 | Mysql 5.5.31 MySQL client version: 5.5.31