SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fluid content boxes help

    Hi,

    I hope somebody can help

    The problem can be seen here

    http://babbage.50webs.com/

    As you can see, I have content boxes with differing amounts of content.

    What I would like to do, is to ensure that each box is the same height, no matter how much content it has, particularly when a user increases the text size from their browser.

    What I'm trying to achieve is the same effect as shown here(the 3 boxes at the bottom) when you increase the text size:

    http://www.bbc.co.uk/weather/

    Many thanks

  2. #2
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am thinking of holding all of them in a container div and specify each of four individual div height: 100%. But I remember that either IE or FF wouldn't output this properly, could someone point it out for me please and thanks.

    Another approach is the use the same container div and use a 1px background image to fake the color pattern shown there and repeat it vertically. This way the height will remain constant.
    In search of the clouds...and maybe some work

  3. #3
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kefeso
    I am thinking of holding all of them in a container div and specify each of four individual div height: 100%. But I remember that either IE or FF wouldn't output this properly, could someone point it out for me please and thanks.

    Another approach is the use the same container div and use a 1px background image to fake the color pattern shown there and repeat it vertically. This way the height will remain constant.
    Thanks a lot - went with the faux column solution and it works a treat now.

    Had to overcome a small problem in that my sub_box classes weren't being contained within the rowcontainer parent div.

    A bit of investigation on Sitepoint identified that the problem was because the sub_box classes are floated.

    This site http://www.cs.hmc.edu/~mbrubeck/clear-after/ introduced me to :after pseudo selector and it works perfectly now.

  4. #4
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, yea the :after pseudo class is one option to do the fix. However, it is yet to be supported in some older broswers with only CSS1 support. In that case, a clear both solution is usually implemented to solve the issue. Just stick in a div at the end with the class clearfix as outlined below would solve the floating problem.

    Code:
    <div id="floats_container">
     <div class="float"></div>
     <div class="float"></div>
     <div class="float"></div>
     <div class="clearfix"</div>
    </div>
    Code:
    .clearfix{
     clear: both;
    }
    In search of the clouds...and maybe some work

  5. #5
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgot about the older browsers - oops!!

    Have changed it to .clearfix and it works great.

    Many thanks for all your help


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •