CSS Layout tricks

Question

I am experementing for the first time with css layouts (have experience of the very basic css setup). All I want to achieve is a 2 column layout (left panel and content). I have found this:

#leftcontent {
 position: absolute;
 left:10px;
 top:10px;
 width:170px;
 border:1px solid #C0C0C0;
 padding: 2px;
}

#centercontent 
{
    position: absolute;
    margin-left: 181px;
    border:1px solid #C0C0C0;
    top:10px;
    //fix IE5 bug
    voice-family: "\"}\"";
    voice-family: inherit;
    margin-left: 181px;
}

This displays great in firefox but the content in IE8 goes off the right of the screen, I assume by the length of the leftcontent. How can I fix this?

I appreciate this is probably quite a simple fix but I have experimented and looked for fixes but this supposedly should work.

Answer 1

Use a table. It is more suited to the task, way easier to implement and far more reliable across different browsers.

Answer 2

I'd advise floating the #leftcontent element to the left, and then setting the margin of the #centercontent element to compensate:

#leftcontent {
        float: left;
        width:170px;
        border:1px solid #C0C0C0;
        padding: 2px;
}

#centercontent {
        margin-left: 181px;
        border:1px solid #C0C0C0;
}

Answer 3

Set a width on #centercontent. Whether that be a percentage or a px size that will be what you're looking for.

Answer 4

Use the float property to do this. An excellent float tutorial is Floatutorial. Here is how your CSS would look using floats:

#leftcontent {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    width: 170px;
    border: 1px solid #C0C0C0;
    padding: 2px;
}

#centercontent {
    float: left;
    margin-left: 10px;
    border: 1px solid #C0C0C0;
    margin-top: 10px;
}

Then if you want a div to appear below those divs, you'll have to use this CSS:

#contentbelow {
    clear: both;
}

Also, you should set a width for #centercontent, as floated elements always need an explicit width.

Answer 5

What others have said regarding float should help. Additionally, there are two things to check:

• Have you tried setting the overflow for the left content, so the browser has a better idea of what to do when something doesn't fit in the space you allowed.
• Have you looked for what element is causing the left side to overflow? Some elements just can't be wrapped, and if they are too wide they will force the width of the entire div to stretch to accommodate them.

Answer 6

My favourite method of doing column layouts is using float:left and right.

colwrapper is set to 40em width, the margin-...:auto make the div centred (in everything but IE4 or IE5, for some reason)

footer appears after both the columns because of the clear:both.

This will scale nicely when you increase the font-size (ctrl and + or -), and you can easily nest columns inside columns (to do a 3 column layout, you do the same thing, but put two divs inside #colleft, and float left/right them)

#colwrapper{
    width:40em;
    margin-left:auto;
    margin-right:auto;
}
#colleft{
    float:left;
    width:10em;
}
#colright{
    float:right;
    width:30em
}
#footer{
    clear:both
}

And the HTML:

<div id="colwrapper">
    <div id="colleft">
        left column!
    </div>
    <div id="colright">
        right column!
    </div>
    <div id="footer">
        footer!
    </div>
</div>