I have to get a layout done in a particular way. I have set the clear property to do this. However, when I apply clear to multiple consecutive elements, any other element that follows the 'cleared' elements, gets placed along side the last of the 'cleared' element. What I need though is the elements to be placed along side the first cleared element. I have given the html code. When the html is rendered, I would like 'Cell 6' to go along side 'cell 3', instead of 'Cell 5'. What do I need to do to achieve this. I have given the code for you to take a look at. Thanks for your help! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Test</title> </head> <body> <div style="float:left; padding: 10px;border: 1px solid gray;width: 500px;"> <div style="float:left;width: 150px;clear:left;border: 1px solid gray;"> cell 1 </div> <div style="float:left;width: 150px;border: 1px solid gray;"> cell 2 </div> <div style="float:left;width: 150px;clear:left;border: 1px solid gray;"> cell 3 </div> <div style="float:left;width: 150px;clear:left;border: 1px solid gray;"> cell 4 </div> <div style="float:left;width: 150px;clear:left;border: 1px solid gray;"> cell 5 </div> <div style="float:left;width: 150px;border: 1px solid gray;height:100px;"> Cell 6 </div> </div> </center> </body> </html> HTML:
Create two columns. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> /*<![CDATA[*/ div.col { width: 150px; float: left; } div#wrapper { border: 1px solid gray; overflow: hidden; /*see link below*/ padding: 10px; width: 500px; } p { border: 1px solid gray; margin: 0; text-align: center; } p.oddball { height: 150px; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <div class="col"> <p>cell 1</p> <p>cell 3</p> <p>cell 4</p> <p>cell 5</p> </div> <div class="col"> <p>cell 2</p> <p class="oddball">cell 6</p> </div> </div> </body> </html> Code (markup): See Enclosing float elements. cheers, gary
Gary, First of all thanks a lot for taking the time to code it up. One thing I forgot to mention is that the 2-column option may not work for my purpose. The code I put was part of a larger code chunk, which I generate dynamically. I would like to control the layout using CSS only without adding any additional HTML elements. By putting the additional divs, I am restricted to a 2-column layout. I need the flexibility to bring cell 2 to appear under left column. By enclosing the cell 2 and cell 6 in the right column I would lose that. What I have appears to be working under IE7, but breaks under firefox/chrome. I need to understand why cell 6 remains with last div element and does not float up. Thanks again for your help.