I'm trying to do some layout of some html. The basic idea is to get six divs laid out into a grid pattern of two columns and three rows. Each div has a separate id and I want the CSS to determine the layout and which column and row is used to display the data.
The data can be of varying lengths, not known in advance. The top of each rows should be aligned to the same level. This is my first stab, but it doesn't work. Perhaps I need to nest divs, but that seems a little strange to be. After all why would I need to nest divs which is information about layout, in the HTML. Why can't I do all the layout in the CSS Nick <!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head><title>Title</title> <style type="text/css"> <!-- #topleft { float:left; width:50%; background: yellow; } #topright { float:left; width:50%; background: green; } #midleft { clear:both; float:left; width:50%; background: cyan; } #midright { float:left; width:50%; background: blue; } #bottomleft { clear:both; float:left; width:50%; background: brown; } bottomright { float:right; width:50%; background: Darkorange; } --> </style> </head> <body> <div id="topleft">top left <br/> <br/> <br/> </div> <div id="topright">top right <br/> </div> <div id="midleft">middle left <br/> <br/> <br/> </div> <div id="midright">middle right <br/> </div> <div id="bottomleft">bottom left <br/> </div> <div id="bottomright">bottom right <br/> <br/> <br/> </div> </body> </html> -- Nick -- Nick ______________________________________________________________________ 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/
