CSS columns problem - faux columns don't work

Discussion in 'HTML' started by henrybranson@hotmail.com, Nov 21, 2005.

  1. Guest

    I'm trying to achieve a multi-column layout in CSS where the columns
    are all of equal length irrespective of the content in them. I've tried
    to implement Dan Cederholm's faux columns solution but it doesn't work.

    Here's my code - what am I doing wrong?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--

    body {
    color: #7F7F7F;
    font: normal 0.70em/1.6em Verdana, Arial, sans-serif;
    margin: 0;
    padding: 0;
    }

    #container {
    background: #fff56b url("bg.gif") repeat-y 0 0;
    float: left;
    width: 780px;
    background-color: #FFF;
    border: 1px dotted #000;
    }
    #column1, #column2, #column3, #column4 {
    width: 25%;
    background-color: #CCFFCC;
    float: left;
    }

    #clear {
    clear:both;
    }
    -->
    </style>
    </head>
    <body>
    <div id="container">
    <div id="column1">content</div>
    <div id="column2">Alternatively, if borders or padding can be avoided
    altogether by just using margins instead, then the the Box Model Hack
    will not be necessary. And if the column's content is simply sitting
    (transparently) on top of the tiled background, then it should be easy
    to avoid the hack.
    </div>
    <div id="column3">content</div>
    <div id="column4">Alternatively, if borders or padding can be avoided
    altogether by just using margins instead, then the the Box Model Hack
    will not be necessary. And if the column's content is simply sitting
    (transparently) on top of the tiled background, then it should be easy
    to avoid the hack. Alternatively, if borders or padding can be avoided
    altogether by just using margins instead, then the the Box Model Hack
    will not be necessary. And if the column's content is simply sitting
    (transparently) on top of the tiled background, then it should be easy
    to avoid the hack.
    </div>
    <div id="clear"></div>
    </div>
    </body>
    </html>
     
    , Nov 21, 2005
    #1
    1. Advertising

  2. dorayme Guest

    > From:
    >
    > I'm trying to achieve a multi-column layout in CSS where the columns
    > are all of equal length irrespective of the content in them. I've tried
    > to implement Dan Cederholm's faux columns solution but it doesn't work.
    >
    > Here's my code - what am I doing wrong?
    >


    I had a fiddle and changing the width to just less than 25% for
    the cols made them behave better, seems borders are taking up
    space not leaving room for your specs... or you can have no
    borders and no padding and leave your specs (looks awful but...)

    Why don't you stop messing about and use a goddamn table and be
    done. I didn't mean that. It just came all blurting out from the
    subconscious. One really must restrain oneself in church...

    --
    dorayme
     
    dorayme, Nov 22, 2005
    #2
    1. Advertising

  3. Neredbojias Guest

    With neither quill nor qualm, quothed:

    > I'm trying to achieve a multi-column layout in CSS where the columns
    > are all of equal length irrespective of the content in them. I've tried
    > to implement Dan Cederholm's faux columns solution but it doesn't work.
    >
    > Here's my code - what am I doing wrong?


    Nothing. That's the way css works. Your "length" is really height and
    no parent height is established. Furthermore, the height you want is
    not a parent.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Nov 22, 2005
    #3
  4. Jim Higson Guest

    wrote:

    > I'm trying to achieve a multi-column layout in CSS where the columns
    > are all of equal length irrespective of the content in them. I've tried
    > to implement Dan Cederholm's faux columns solution but it doesn't work.
    >
    > Here's my code - what am I doing wrong?


    If it isn't important that it works everywhere, Firefox 1.5 can do columns
    with CSS3-like rules, and the final version should be out very soon.

    see http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html
     
    Jim Higson, Nov 22, 2005
    #4
  5. Guest

    Thanks dorayme - and others
     
    , Nov 24, 2005
    #5
    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. tshad

    Datagrid, CSS and IE don't work

    tshad, Aug 2, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    682
    tshad
    Aug 15, 2005
  2. Replies:
    3
    Views:
    337
    Luke Webber
    Apr 26, 2006
  3. monkeymynd
    Replies:
    7
    Views:
    567
    Jonathan N. Little
    Mar 21, 2007
  4. Guest
    Replies:
    0
    Views:
    559
    Guest
    Jun 29, 2007
  5. Pirolla
    Replies:
    1
    Views:
    377
    123Jim
    Apr 18, 2011
Loading...

Share This Page