CSS liquid layout - can't achieve correct sizing - Page 2

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Re: CSS liquid layout - can't achieve correct sizing

Quoted text here. Click to load it

Hmm I kind have this working without really understanding it. Undersanding
growing but not there fully yet.
However, alhtouhg this works, getting the div that is to the right of the
left section I can now get to expand downwards to match the text content, I
can't make the right hand section fill down to match the same size as the
left section (I hope that makes sense).

So for example, lets say I put a repeating vertical image in the right hand
section div, using the suggested technique above stops the right hand
section repeating the image down to the bottom where the left hand section
goes down to.

Hopefully what I'm saying makes sense.

Thanks for input

Re: CSS liquid layout - can't achieve correct sizing

On 2007-12-18, <news.freedom2surf.net> <> wrote:
Quoted text here. Click to load it

Yes. You can't really do that automatically with floats.

Quoted text here. Click to load it

The height of a float depends only on the stuff inside that float (and
whatever you may have set for height, min-height, or max-height). You
can't take two floats that are side-by-side and make them both the be
the height that the taller one's content requires. That's what tables
are for. Tables are the only elements that "link" adjacent column
heights together in that way.

But, there are some clever tricks. If you're setting a width on that
right hand float explicitly, you can just give it a transparent
background (the default), and then put its background image on its
container instead, because the container is the right height.

In other words, make one big background image for the container that
extends underneath the floats as well, and is visible through the whole
lot. Of course you can make an image that looks different at the two
edges that are underneath the floats, so that the finished effect looks
like the floats have their own distinct background images, and that
everything is all the same height.

Site Timeline