How to have columns with equal height?

Discussion in 'HTML' started by Fister, Jan 3, 2008.

  1. Fister

    Fister Guest

    I'd like for the div.something-else below the three columns to be placed
    25 pixels below the coloumn with the longest text. Unfortunately with the
    code below it only relates to the center-column. That causes problems if
    the text in left- or right-column are long. How can I fix this?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Column</title>
    <style type="text/css">
    #page
    {
    width: 620px;
    }

    #left-column
    {
    border: 1px solid #000000;
    float: left;
    width: 200px;
    }

    #right-column
    {
    border: 1px solid #000000;
    float: right;
    width: 200px;
    }

    #center-column
    {
    border: 1px solid #000000;
    margin: 0 210px 0 210px;
    }

    #something-else
    {
    border: 1px solid #000000;
    margin-top: 25px;
    }
    </style>
    </head>
    <body>
    <div id="page">
    <div id="column-container">
    <div id="left-column">
    <span class="text">left left left left left left left left left left
    left left left left left left left left left left left left left left left
    left left left left left left left left left left left left left left left</span>

    </div>
    <div id="right-column">
    <span class="text">right right right right right right right right right
    right</span>
    </div>
    <div id="center-column">
    <span class="text">center center center center center center center
    center center center</span>
    </div>
    </div>
    <div id="something-else">
    something else something else something else
    </div>
    </div>
    </body>
    </html
     
    Fister, Jan 3, 2008
    #1
    1. Advertising

  2. Fister

    dorayme Guest

    In article <>,
    Fister <> wrote:

    > I'd like for the div.something-else below the three columns to be placed
    > 25 pixels below the coloumn with the longest text. Unfortunately with the
    > code below it only relates to the center-column. That causes problems if
    > the text in left- or right-column are long. How can I fix this?
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    > <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    > <head>
    > <title>Column</title>
    > <style type="text/css">
    > #page


    I could have sworn there was something that might be a good fix
    for this in a post a few minutes ago!

    http://examples.tobyinkster.co.uk/3col-new

    Just use this, invoice your client, and you can go home.

    --
    dorayme
     
    dorayme, Jan 3, 2008
    #2
    1. Advertising

  3. Fister

    Nico Schuyt Guest

    dorayme wrote:
    > Fister <> wrote:
    >
    >> I'd like for the div.something-else below the three columns to be
    >> placed 25 pixels below the coloumn with the longest text.
    >> Unfortunately with the code below it only relates to the
    >> center-column. That causes problems if the text in left- or
    >> right-column are long. How can I fix this?
    >>
    >> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    >> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    >> <html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    >> <head>
    >> <title>Column</title>
    >> <style type="text/css">
    >> #page


    > I could have sworn there was something that might be a good fix
    > for this in a post a few minutes ago!
    > http://examples.tobyinkster.co.uk/3col-new
    > Just use this, invoice your client, and you can go home.


    I have the same problem as Els (freezes in IE /Windows XP Home).

    --
    Nico
     
    Nico Schuyt, Jan 3, 2008
    #3
  4. Fister

    Nico Schuyt Guest

    Fister wrote:
    > I'd like for the div.something-else below the three columns to be
    > placed 25 pixels below the coloumn with the longest text.
    > Unfortunately with the code below it only relates to the center-column.
    > That causes problems
    > if the text in left- or right-column are long. How can I fix this?


    Maybe something like http://www.html.it/articoli/niftycube/nifty8.html ?

    --
    Nico
     
    Nico Schuyt, Jan 3, 2008
    #4
  5. Fister

    Fister Guest

    Hello dorayme,

    > I could have sworn there was something that might be a good fix for
    > this in a post a few minutes ago!
    >
    > http://examples.tobyinkster.co.uk/3col-new


    Thanks, that would be a solution. But isn't it possible without the use of
    JavaScript
     
    Fister, Jan 3, 2008
    #5
  6. Fister

    Ben C Guest

    On 2008-01-03, Fister <> wrote:
    > I'd like for the div.something-else below the three columns to be placed
    > 25 pixels below the coloumn with the longest text. Unfortunately with the
    > code below it only relates to the center-column. That causes problems if
    > the text in left- or right-column are long. How can I fix this?


    Put another div around #something-else, with clear: both and
    padding-top: 1px set on it.

    Then set margin-top on something-else to only 24px (because of the 1px
    of padding).

    [...]

    Like this:

    <div style="clear: both; padding-top: 1px">
    > <div id="something-else">
    > something else something else something else
    > </div>

    </div>

    You need the other div (rather than just setting clear on
    something-else) because otherwise its 25px margin-top is absorbed by the
    clearing offset.

    Padding-top of 1px prevents margin collapsing between the new div and
    #something-else.
     
    Ben C, Jan 3, 2008
    #6
  7. Fister

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Thu, 03 Jan 2008 21:53:16
    GMT Fister scribed:

    > Hello dorayme,
    >
    >> I could have sworn there was something that might be a good fix for
    >> this in a post a few minutes ago!
    >>
    >> http://examples.tobyinkster.co.uk/3col-new

    >
    > Thanks, that would be a solution. But isn't it possible without the
    > use of JavaScript?


    Of course it is. But post a url (preferably with css included.) I'm not
    going to institute your code as your page to solve your problem.

    Btw, I'm pretty sure it _is_ easily solvable.

    --
    Neredbojias
    Riches are their own reward.
     
    Neredbojias, Jan 3, 2008
    #7
  8. Fister

    Nik Coughlin Guest

    "Fister" <> wrote in message
    news:...
    > I'd like for the div.something-else below the three columns to be placed
    > 25 pixels below the coloumn with the longest text. Unfortunately with the
    > code below it only relates to the center-column. That causes problems if
    > the text in left- or right-column are long. How can I fix this?


    http://www.nrkn.com/3ColEqualPositioned/

    Tested in Safari, Opera, Firefox, IE 6 & 7.
     
    Nik Coughlin, Jan 3, 2008
    #8
  9. Fister

    GTalbot Guest

    On 3 jan, 18:43, "Nik Coughlin" <> wrote:
    > "Fister" <> wrote in message
    >
    > news:...
    >
    > > I'd like for the div.something-else below the three columns to be placed
    > > 25 pixels below the coloumn with the longest text. Unfortunately with the
    > > code below it only relates to the center-column. That causes problems if
    > > the text in left- or right-column are long. How can I fix this?

    >
    > http://www.nrkn.com/3ColEqualPositioned/
    >
    > Tested in Safari, Opera, Firefox, IE 6 & 7.


    Before people start copying that CSS template, I'd like to point out a
    few problems or issues with the webpage:

    1- It uses a lot of positioning (relative and absolute) and also
    floats. As a rule, I try to avoid positioning (rel. and abs.) when
    using float. I either use only float (with clear) or only positioning
    but not both.

    2- Try highlighting/selecting some text in the yellow (left) column,
    preferably toward the top in Internet Explorer 7: impossible.

    3- I wonder why the template uses so many empty divs:
    <div class="leftBack"></div>
    <div class="rightBack"></div>
    <div class="middleBack"></div>
    <div class="clear"></div>

    Clearing with structural markup is not recommendable, certainly not
    semantic markup.

    Regards, GĂ©rard
     
    GTalbot, Jan 4, 2008
    #9
  10. Fister

    Nik Coughlin Guest

    "GTalbot" <> wrote in message
    news:...
    On 3 jan, 18:43, "Nik Coughlin" <> wrote:
    >> "Fister" <> wrote in message
    >>
    >> news:...
    >>
    >> > I'd like for the div.something-else below the three columns to be
    >> > placed
    >> > 25 pixels below the coloumn with the longest text. Unfortunately with
    >> > the
    >> > code below it only relates to the center-column. That causes problems
    >> > if
    >> > the text in left- or right-column are long. How can I fix this?

    >>
    >> http://www.nrkn.com/3ColEqualPositioned/
    >>
    >> Tested in Safari, Opera, Firefox, IE 6 & 7.

    >
    > Before people start copying that CSS template, I'd like to point out a
    > few problems or issues with the webpage:


    Thank you for taking the time to look at it :)

    > 1- It uses a lot of positioning (relative and absolute) and also
    > floats. As a rule, I try to avoid positioning (rel. and abs.) when
    > using float. I either use only float (with clear) or only positioning
    > but not both.


    What led you to formulate that rule? I'm interested to hear, if you have a
    good reason I may have to rethink my way of doing certain things.

    > 2- Try highlighting/selecting some text in the yellow (left) column,
    > preferably toward the top in Internet Explorer 7: impossible.


    Hmmm, you're right, but really this is a problem with IE 7, not the layout.
    I believe it would be solvable with some trivial hackery inside the lte IE 7
    conditional comment, and I will probably do so later.

    > 3- I wonder why the template uses so many empty divs:
    > <div class="leftBack"></div>
    > <div class="rightBack"></div>
    > <div class="middleBack"></div>
    > <div class="clear"></div>


    Aside from the clearing div, one empty div for each column. The empty divs
    sit behind the actual columns, taking their height from the parent div (ie
    the height of the highest child element) via absolute positioning within a
    relatively positioned parent, thereby allowing proper use of background,
    border etc. on the columns. I don't think a little extra markup to achieve
    an otherwise difficult effect is such a crime, but again, maybe I would
    change my mind if I were aware of your reasoning :)

    > Clearing with structural markup is not recommendable, certainly not
    > semantic markup.


    What would you recommend instead? I was of the opinion that a div is fairly
    semantically neutral.
     
    Nik Coughlin, Jan 4, 2008
    #10
  11. Fister

    Fister Guest

    Hello Ben,

    > Put another div around #something-else, with clear: both and
    > padding-top: 1px set on it.


    Thank you very much for the code. At first it worked but now I've added another
    two columns to the left and right which causes problem with clear: both.
    Could you / anyone help me? I think this should be easy to solve but I can't
    figure out how :-/

    Here is the code:

    http://www.bullamanka.dk/test.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="dk">
    <head xmlns="">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Test</title>
    <style type="text/css">
    body
    {
    margin: 10px 0 10px 0;
    padding: 0;
    text-align: center;
    }

    #page
    {
    background-color: #FFFFFF;
    margin: 0 auto;
    text-align: left;
    width: 740px;
    }

    #page-left-column
    {
    background-color: #E2E2E2;
    float: left;
    height: 300px;
    width: 200px;
    }

    #page-center-column
    {
    margin: 0 210px 0 210px;
    }

    #page-right-column
    {
    background-color: #E2E2E2;
    float: right;
    height: 300px;
    width: 200px;
    }

    #page-center-column-left-column
    {
    background-color: #B9B9B9;
    float: left;
    width: 100px;
    }

    #page-center-column-right-column
    {
    background-color: #B9B9B9;
    float: right;
    width: 100px;
    }

    #page-center-column-center-column
    {
    background-color: #E2E2E2;
    margin: 0 110px 0 110px;
    width: 100px;
    }

    #page-another-container
    {
    background-color: #D9D9D9;
    height: 100px;
    margin-top: 24px;
    }

    #clear
    {
    clear: both;
    padding-top: 1px;
    }
    </style>
    </head>
    <body>
    <div id="page">
    <div id="page-left-column">
    left
    </div>
    <div id="page-right-column">
    right
    </div>
    <div id="page-center-column">
    <div id="page-center-column-container">
    <div id="page-center-column-left-column">
    left left left left left left left left left left left left left left
    left left left left left left
    </div>
    <div id="page-center-column-right-column">
    right right right right right right right right right right right right
    right right right right right right right right
    </div>
    <div id="page-center-column-center-column">
    center center center
    </div>
    </div>
    <div id="clear">
    <div id="page-another-container">
    another
    </div>
    </div>
    </div>
    </div>
    </body>
    </html
     
    Fister, Jan 4, 2008
    #11
  12. Fister

    Ben C Guest

    On 2008-01-04, Fister <> wrote:
    > Hello Ben,
    >
    >> Put another div around #something-else, with clear: both and
    >> padding-top: 1px set on it.

    >
    > Thank you very much for the code. At first it worked but now I've
    > added another two columns to the left and right which causes problem
    > with clear: both. Could you / anyone help me? I think this should be
    > easy to solve but I can't figure out how :-/
    >
    > Here is the code:
    >
    > http://www.bullamanka.dk/test.html


    [...]
    > #page-center-column
    > {
    > margin: 0 210px 0 210px;

    ^^^^^^^^^^^^^^^^^^^^^^^^

    Get rid of this line. Replace it with overflow: hidden.

    If you make the center-column overflow: hidden it becomes a Block
    Formatting Context.

    Regular readers of alt.html will by now be familiar with the idea of
    using Block Formatting Contexts to cause containers to grow in height to
    accommodate floated descendents.

    But here we are using two other useful properties of BFCs:

    1. The clear instruction clears floats _within the same BFC_. By making
    #page-center-column a BFC, it becomes the BFC for #clear. That means
    that #clear no longer clears the two big floats to the left and right
    (page-left-column and page-right-column).
    2. A BFC with auto width, unlike a regular block box, _itself becomes
    narrower_ to squeeze between floats. A regular block box doesn't, it
    occupies the full available width and its inline contents flow around
    the floats. That was why you were using those 210px margins on
    #page-center-column. If #page-center-column is a BFC, it no longer
    wants those margins.

    This is all standard CSS 2.1 (well, pretty much, the specification does
    allow for #page-center-column to move below the two floats rather than
    squeeze between them, but I don't know of any browsers that actually do
    that).

    Don't know if it works in IE.
     
    Ben C, Jan 4, 2008
    #12
  13. Fister

    Fister Guest

    Hello Ben,

    > If you make the center-column overflow: hidden it becomes a Block
    > Formatting Context.
    >
    > Regular readers of alt.html will by now be familiar with the idea of
    > using Block Formatting Contexts to cause containers to grow in height
    > to accommodate floated descendents.
    > ...
    > Don't know if it works in IE.


    Thank you very much for your detailed explanation! It doesn't look as intended
    in MSIE6 but in my case that doesn't matter :-
     
    Fister, Jan 4, 2008
    #13
  14. Fister

    dorayme Guest

    In article <>,
    Ben C <> wrote:

    > Regular readers of alt.html will by now be familiar with the idea of
    > using Block Formatting Contexts to cause containers to grow in height to
    > accommodate floated descendents.
    >
    > But here we are using two other useful properties of BFCs:
    >
    > 1. The clear instruction clears floats _within the same BFC_. By making
    > #page-center-column a BFC, it becomes the BFC for #clear. That means
    > that #clear no longer clears the two big floats to the left and right
    > (page-left-column and page-right-column).
    > 2. A BFC with auto width, unlike a regular block box, _itself becomes
    > narrower_ to squeeze between floats. A regular block box doesn't, it
    > occupies the full available width and its inline contents flow around
    > the floats. That was why you were using those 210px margins on
    > #page-center-column. If #page-center-column is a BFC, it no longer
    > wants those margins.
    >
    > This is all standard CSS 2.1 (well, pretty much, the specification does
    > allow for #page-center-column to move below the two floats rather than
    > squeeze between them, but I don't know of any browsers that actually do
    > that).


    I hope you realise that every time you say stuff like this, it
    makes work for me! I scurry off to see if I have to include extra
    material into the story I am writing on parents and floated
    children. So please be very responsible in what you say.

    <g>

    --
    dorayme
     
    dorayme, Jan 4, 2008
    #14
  15. Fister

    Jeff Guest

    Fister wrote:
    > Hello dorayme,
    >
    >> I could have sworn there was something that might be a good fix for
    >> this in a post a few minutes ago!
    >>
    >> http://examples.tobyinkster.co.uk/3col-new

    >
    > Thanks, that would be a solution. But isn't it possible without the use
    > of JavaScript?
    >
    >

    I have problems with that page in IE6 windows, it locks up the
    browser. I didn't look at the javascript but this can't be difficult. I
    think the basic idea is sound and should work with other two plus column
    layouts.

    Not since the ill fated NS4 used javascript to implement CSS (and not
    well) has the use of javascript been in the toolbox for styling needs.
    And the cool thing (with the obvious exception of Toby's 3 column in
    IE) is that it degrades nicely.

    Jeff
     
    Jeff, Jan 6, 2008
    #15
  16. Fister

    dorayme Guest

    In article <>,
    Jeff <jeff@spam_me_not.com> wrote:

    > Fister wrote:
    > > Hello dorayme,
    > >
    > >> I could have sworn there was something that might be a good fix for
    > >> this in a post a few minutes ago!
    > >>
    > >> http://examples.tobyinkster.co.uk/3col-new

    > >
    > > Thanks, that would be a solution. But isn't it possible without the use
    > > of JavaScript?
    > >
    > >

    > I have problems with that page in IE6 windows, it locks up the
    > browser. I didn't look at the javascript but this can't be difficult. I
    > think the basic idea is sound and should work with other two plus column
    > layouts.
    >
    > Not since the ill fated NS4 used javascript to implement CSS (and not
    > well) has the use of javascript been in the toolbox for styling needs.
    > And the cool thing (with the obvious exception of Toby's 3 column in
    > IE) is that it degrades nicely.
    >
    > Jeff


    Well, OK, I always leave it till very late to look at Win IE. But
    by now, perhaps there is a fix for TI's page. Bootnic suggested
    something. TI will look at it and we will see. God! I feel like a
    cricket commentator!

    [The test between Australia and India is on. (7/184) and 8 overs
    to go and India will not win, the question is will Australia?]

    --
    dorayme
     
    dorayme, Jan 6, 2008
    #16
  17. Fister

    Jeff Guest

    dorayme wrote:
    > In article <>,
    > Jeff <jeff@spam_me_not.com> wrote:
    >
    >> Fister wrote:
    >>> Hello dorayme,
    >>>
    >>>> I could have sworn there was something that might be a good fix for
    >>>> this in a post a few minutes ago!
    >>>>
    >>>> http://examples.tobyinkster.co.uk/3col-new
    >>> Thanks, that would be a solution. But isn't it possible without the use
    >>> of JavaScript?
    >>>
    >>>

    >> I have problems with that page in IE6 windows, it locks up the
    >> browser. I didn't look at the javascript but this can't be difficult. I
    >> think the basic idea is sound and should work with other two plus column
    >> layouts.
    >>
    >> Not since the ill fated NS4 used javascript to implement CSS (and not
    >> well) has the use of javascript been in the toolbox for styling needs.
    >> And the cool thing (with the obvious exception of Toby's 3 column in
    >> IE) is that it degrades nicely.
    >>
    >> Jeff

    >
    > Well, OK, I always leave it till very late to look at Win IE. But
    > by now, perhaps there is a fix for TI's page.


    My initial WAG was that the javascript was in a loop. Probably because
    of the onresize event handler. TI is pretty sharp about these things I
    suspect it won't be much trouble for him to fix it. Neither is it much
    trouble to write your own resize code. I thought of this a couple weeks
    ago after seeing all the javascript rounded corners examples, if js is
    not a bad option there (it degrades well), then why not for the problem
    of having same sized columns? That's one thing table layouts do well
    that CSS just can't do without a little logic.


    Bootnic suggested
    > something. TI will look at it and we will see. God! I feel like a
    > cricket commentator!
    >
    > [The test between Australia and India is on. (7/184) and 8 overs
    > to go and India will not win, the question is will Australia?]



    I've heard that the rules of cricket are very simple.

    Jeff
    >
     
    Jeff, Jan 6, 2008
    #17
  18. Fister

    dorayme Guest

    In article <>,
    Jeff <jeff@spam_me_not.com> wrote:

    > I've heard that the rules of cricket are very simple.
    >


    Ouch! What can I say? How about, '...so are the rules of chess'?

    <g>

    --
    dorayme
     
    dorayme, Jan 6, 2008
    #18
  19. Fister

    Jeff Guest

    dorayme wrote:
    > In article <>,
    > Jeff <jeff@spam_me_not.com> wrote:
    >
    >> I've heard that the rules of cricket are very simple.
    >>

    >
    > Ouch! What can I say? How about, '...so are the rules of chess'?


    Most Americans don't have a clue what this means:

    The test between Australia and India is on. (7/184) and 8 overs
    to go and India will not win, the question is will Australia?

    Unfortunately (or not), I'm one of them!

    Jeff
    >
    > <g>
    >
     
    Jeff, Jan 7, 2008
    #19
  20. Fister

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Mon, 07 Jan 2008 08:49:07 GMT
    Jeff scribed:

    > dorayme wrote:
    >> In article <>,
    >> Jeff <jeff@spam_me_not.com> wrote:
    >>
    >>> I've heard that the rules of cricket are very simple.
    >>>

    >>
    >> Ouch! What can I say? How about, '...so are the rules of chess'?

    >
    > Most Americans don't have a clue what this means:
    >
    > The test between Australia and India is on. (7/184) and 8 overs
    > to go and India will not win, the question is will Australia?
    >
    > Unfortunately (or not), I'm one of them!


    Sounds like the annual pan-Indian Ocean flapjack contest. You have to flip
    each one of 7 stacks of 184 flapjacks with a spatula and catch it mid-air
    within 8 minutes or it's all over.

    --
    Neredbojias
    Riches are their own reward.
     
    Neredbojias, Jan 7, 2008
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Nik Coughin
    Replies:
    9
    Views:
    612
    Nik Coughlin
    Nov 30, 2004
  2. Nik Coughlin
    Replies:
    0
    Views:
    655
    Nik Coughlin
    May 15, 2007
  3. Jeff
    Replies:
    11
    Views:
    1,520
    dorayme
    Jan 23, 2008
  4. Matt White

    DIVs of Equal Height

    Matt White, Aug 6, 2008, in forum: HTML
    Replies:
    8
    Views:
    550
    dorayme
    Aug 9, 2008
  5. Replies:
    2
    Views:
    246
    Thomas 'PointedEars' Lahn
    Aug 5, 2008
Loading...

Share This Page