2
Contributors
2
Replies
3
Views
10 Years
Discussion Span
Last Post by autocrat
0

At a look... I'd guess either you have used "height:" or are using "float:" and not clearing it.

0

Hmmm, you also haev a big issue with resizing text in MozFF.


Okay... as it stands you have a Container.
Inside the Container, you have 2 independant Columns, (meaing they are not nested).

As they are not nested they have no relation to each other (so no matter the size of the Left, the right will not stretch, and vice versa).


Instead... you either want to re-order things a little...

<div id="container">
<div id="content">
<div id="leftcol">
</div>
</div>
</div>

#container
{
float: left;
clear: both;
#zoom:1; /*IE Bug Fix */
}

#contents
{
margin-left: 200px;
}

#leftcol
{
margin: 0 -1px 0 -200px;
width: 200px;
float: left;
position: relative; /* IE Bug Fix */
#display: inline; /* IE Bug Fix */
}


All of this means that basically, you hae a parent block... containg a child and grandchild.
The child is pushed from the left exactly the same distance as the width of the grandchild.
the grandchild is then pulled to the left, almost completely leaving the child, bar 1px.

You use the float: on both Parent and Grandchild interact.
(NOTE: You may want to apply Float to the Parent as well (so you float container, content and leftcol).

Also, helps if you test in other browsers as build!
Further, you may want to validate it ( though I am impressed with the coding standard and the CSS!).

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.