[thelist] CSS befuddlement! Help please

Rob Schumann robs at rs-tc.com
Tue Jul 9 22:59:00 CDT 2002


Hi,

I have a css puzzle that has me stumped...

I have a page that consists of a masthead, horizontal navigation bars, a main body and a footer that stretches the full width of the page. All this is held within a wrapper div that constrains the page to be 600px wide and this centred on the screen.

A rough approximation is:

+-----------------------------------------------------------+
| Browser window                                            |
|          +-------------------------------------+          |
|          | Masthead                            |          |
|          +-------------------------------------+          |
|          | Navigation                          |          |
|          +-------------------------------------+          |
|          | Main body                           |          |
|          |                                     |          |
|          |                                     |          |
|          |                                     |          |
|          |                                     |          |
|          |                                     |          |
|          |                                     |          |
|          |                                     |          |
|          |                                     |          |
|          +-------------------------------------+          |
|          | Footer                              |          |
|          +-------------------------------------+          |
|                                                           |
+-----------------------------------------------------------+

The bit that causes me consternation is the way that the body and footer play together... or rather don't.

On some pages the main body is divided into two columns, thus:

+------------+------------------------+
| Main body  |                        |
|            |                        |
|            |                        |
|            |                        |
|            |                        |
|            |                        |
|            |                        |
|            |                        |
|            |                        |
+------------+------------------------+
| Footer                              |
+-------------------------------------+

Currently I have the Whole main body containing a div, which itself contains a floating (left) div... Main body is defined with min-height: 200;

The problems are these...

*IE Mac ignores completely the min-height, but I can live with that...

*If the right hand column is longer than 200 then the depth of the main body adjusts and the placement of the footer moves down to accommodate the extra depth of the body... this is the intended behaviour.

* If the left hand column is longer than the minimum height, but the right hand column is not, then the left hand column grows (expected), but the main body does not. Footer placement is determined by the length of the main body and so its vertical position is not shifted to accommodate the extra length to the floated div that is inside the main body. Exact behaviour is browser dependent... On Mozilla (Mac) the footer does not move at all and gets over-written by the longer left hand column, On IE (Mac) the footer gets moved right, its left hand edge aligning with the column boundary in the main body.

The Mozilla presentation

| Main body  |                        |
|            |                        |
+------------+------------------------+
| Footer     |                        |
+-------------------------------------+
|            |
|            |
|            |
+------------+

The IE 5.1.5 presentation

| Main body  |                        |
|            |                        |
|            +------------------------------------+
|            | Footer                             |
|            +------------------------------------+
|            |
|            |
|            |
+------------+

Clearly, float isn't working as the depth of the floated div is not controlling the depth of its container. I need a solution where the longer of either column will determine the depth of the container, OR if both are shorter than a minimum depth, that the specified minimum is used.

Any ideas?? (I know a table in the Main content area would work, but I'd like to see if it can be done in CSS. Call me stubborn!

Sorry, but for the moment the test pages are not accessible on an operational server, so these diagrams are the best I can do for the moment...


TIA

Rob

---------------------------------------------------------------------
List FAQ: <http://www.barebones.com/cgi-bin/faq/faq.pl?Web-Authoring>
To unsubscribe, send mail to:  <web-authoring-off at barebones.com>






More information about the thelist mailing list