PeteT PeteT - 6 months ago 14
HTML Question

CSS Layout tricks

I am experimenting for the first time with css layouts and my experience with CSS is very basic. What 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?

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

Answer

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;
}
Comments