How would you this, WITHOUT tables?
This layout can be done quite simply with 2 HTML tables, one nested inside the other, or even with a single table. However, can it be done only with CSS??? Here is a solution I found, it’s pretty cool check it out.
<!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" lang="en"> <head><title>The Challenge</title> <style type="text/css"> div { text-align: center; width: 175px; height: 175px; line-height: 35px; } div div { float:left; width: 35px; height: 35px; } #orange, #maroon, #blue , #green { float:right; } #orange, #silver { background-color: silver; width: 140px; } #navy , #maroon { background-color:maroon; height:140px; line-height:140px; } #navy { background-color:navy ; } #green , #red { background-color:red; width: 70px; } #yellow, #blue { background-color:blue; height: 70px; line-height: 70px; } #yellow { background-color:yellow; } #white { background-color:white ; } #green { background-color:green ; } #orange { background-color:orange; } </style> </head> <body> <div> <div id="silver">1</div> <div id="maroon">2</div> <div id="navy">3</div> <div id="red">4</div> <div id="blue">5</div> <div id="yellow">6</div> <div id="white" >7</div> <div id="green" >8</div> <div id="orange">9</div> </div> </body> </html>
via jsbin
Popularity: 1% [?]
Categories: CSS Tips, Posted on October 31, 2009 by Choppr | Log in
Good.