How DIVs work

[Dabrowski]

I'm trying to acheive the basic layout of FIGURE 1, but I'm wondering if adding the extra div in FIGURE 2 is necessary.

[trampt]

nope .... its not.

[Dabrowski]

I didn't think so. I'm experimenting with the positioning to see how it will work. I guess, isn't that the primary reason divs are taking over tabled layout? To avoide extra nesting and code?

[trampt]

that is true ... you can use Div1 as a container, Div2 just set the width, Div3 float to the right and set width, then DIV4 clear both.

[Dabrowski]

clear both? I'll have to look into that. It was overlapping and I didn't know how to fix it.

[Dabrowski]

Okay, I'm not getting this just right.

<div id="div1">

<div id="div2" style="width: 200px"></div>

<div id="div3" style="width: 500px; float: right"></div>

<div id="div4" style="clear: both"></div>

</div>

Is that a good start?

[trampt]

that should work fine. with div4 though you can just do clear:right instead of both, since by your image div3 is longer ... I just do both in case the content in div2 is for some reason longer than div3.

you might want to put a width on div1 ... 700px perhaps to keep the layout together. Otherwise div3 will float way to the right on a large resolution.