more box model problems

hey guys

i have a container layer which has align=right.

it has two layers inside, one floated to the left colum and one sits (which aligns to the right).

when there's not enough content in the right (main) layer but still lots in the left column, the container is only the height of the main right aligned layer and the content for the left layer stretches down past the bottom.

can anyone point me in the right direction for sorting it out?

You'll need to use a technique known as faux columns.

This repeats an image vertically down the main container which gives the appearance of 'same-height' columns.

You will also need a clearing div if you are using floats, this will clear the floats and keep the container bottom below the floated columns regardless of height of the float.

Something like:

Code: Select all

.clearing {height:0; overflow:hidden; margin:-1px 0 0 0; clear:both;}

and right before the closing </div> of you container put:

Code: Select all

<div class="clearing">&nbsp;</div>

cool, i think i understand - thanks!

whilst im here, i seem to be having difficulty adding more than one set of floated items in a nest.

i have a container layer, with a left colum floated to the left with my links, and a right column floated to the right with the main content.

when i try to float content in the right layer to the left (for example, a tableless form) it wont appear in the right content layer until after the left navigation layer content is finished.



how do i get around that?

i'll try and get a test page up for an example