DIV - dynamic heightam 09.04.2008 04:34:48 von nicnat
I can do this easily with tables but I'm having difficulty trying to
accomplish the same thing using just DIVs. As an example I'll give a simple
design of a page with a header extending all the way across the top and two
columns beneath it. The left column contains NAV information and has a
background color. The right column has the page CONTENT and has a neutral
(ie different) background and contains dynamic page information (ie the
amount of information and thus the length of the column will vary). The
information contained in the 2nd column (CONTENT) is inherently more than
the information contained in the left (NAV) column. The desired effect is
for both columns to have the same height and for the NAV border to extend
the exact length of the page CONTENT.
Using DIVs I can't seem to figure out how to make the height of the left
column adjust to be the same height as the dynamic right hand column. Using
tables its easy. All the columns will automatically scale to the same
height. With DIVs, the column heights are independent of each other. The
consequnce is that the content column is longer than the nav column.
Because the nav column has a background color this difference in height is
all too readily apparent.
How can the desired effect (dynamic height for both columns) be achieved
with DIVs? It's trival with tables and I thought it would be with DIVs.
Stubborn as I am, I'm trying to figure this out. Any help?