Sandy wrote:
Ive never had to create a layout where one column must stretch to the height
of another. I
didn't have any luck doing this with CSS without trying to hack it to death
so I thought i'd
try using a table layout for the first time *gasp*.
see below:
*http://sandygonzales.com/br/br.htm
The bottom gray cell in the left column needs to stretch to the main content
(white cell) in
the right column, but in IE the top cell in the left column (page title
image) also stretches.
Ive researched trying to make it a fixed height (works in FF) and can't come
up with
anything. Is this possible? If not, any workaround?
AFAIK, when in a column there is extra available space, the way
browsers distribute it amongst the rows is not fully controllable, in
other words I don't know how to force IE (and may be others) to put
the extra space all in the second row.
But I think you can get your layout without the table, for example
with the faux column method, i.e. using an image to create an
equal-height illusion.
I assume you don't want to change to source order of your three blocks
#pageTitle, #mainCol, and #leftNavBox (otherwise you could have simply
used a 2 cell table which would have worked). So you can float them,
and put a suitable background image (with your desired column colors)
to a container enclosing them.
I've taken your html, just removed the table markup and applied few
css corrections (in the head, your original css is still included),
see http://brunildo.org/test/test/br.html .
Is this somewhat similar to what you are looking for? Of course many
variations are possible, including not having to use a background
image if you just need solid background colors.
Happy New Year to all,
Bruno
--
Bruno Fassino http://www.brunildo.org/test
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
