two divs side by side

one fixed width one not

[soapystar]

Any help on this. Trying to get two divs to line up alongside each other without overlapping no matter what the screen size. the div to the right of the page is

#right {
border: 1px; border-style: solid; border-color :#3399FF; font-size: 100%; border-collapse: collapse;
width: 305px;
position: absolute;
right: 2px;
height: 500px;

}

Now what i cant work out is how to have the box to the left of it have a width of 100% so no matter what the browser size the right hand box will always be 305px wide with the lft hand box 100% of whats left. It just keeps overlapping or conatining the right div.

[penders]

Since your #right div is absolutely positioned (taken out of the flow of the page), you can position your #left div in the normal flow of the page, but with a large margin-right to allow for the width of your #right div. Such as:

#left {
margin-right:305px;
}

Increase the margin-right value if you want a gap between your #right and #left divs.

And you have a liquid two-column layout. (Note that the #left column will be the same width all the way down to the bottom of the page, it won't flow underneath the #right div after 500px height, as if it was floated.)