Adriano Castro wrote: > Hi all, > > What I'm trying to do is hard to put in words so I drew it: > > + http://dev.adrianocastro.net/help/0004/0004.png > > > I kind of got it to work but am having problems with matching the >height of the "container" div: > > + http://dev.adrianocastro.net/help/0004/0004.html > > > In order to accomplish this layout I chose a *2 column layout*. The >*first column has 3 rows*, the *second column has 2 rows*. Then the >*second row of the second column has 2 columns*. Lastly, the footer is a > div by itself. > > This translates into this: > > <body> > <div id="container"> > <div id="left"> > <div id="left-top"></div> > <div id="left-center"></div> > <div id="left-bottom"></div> > </div> > <div id="top"></div> > <div id="main"> > <div id="main-left"></div> > <div id="main-right"></div> > </div> > </div> > </div> > <div id="footer"></div> > </body> > >
This is the structure I would use, so no problems there. > Although I got it working I'm starting to think I didn't quite >tackle this layout the best way I should have. Because getting the >"container" div to adjust to the height of the inner divs has proven to >be a pain. > > It doesn't need to be. Just remove the height from it so that the height of its content determines its height. In general, never use height for layout elements. Your problem then becomes the fact that you've positioned the child divs absolutely, which means they are removed from the flow of the page. Thus, the container has no content in it to determine its height, and shrinks up. To fix this, switch to a float layout to an absolute layout. Again, in general it is best not to use absolute positioning for main layout elements, just smaller elements within them sometimes. Floats handle almost all layout tasks. Let us know if you need resources on using floats and I'll send you a few good starter links. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
