I've not yet done a design in fluid %. But here is a quick (and dirty) fixed width version I came up with.I had to change the alphabetical order...
<!doctype html> <head> <link rel="stylesheet" href=" http://twitter.github.com/bootstrap/assets/css/bootstrap.css";> <link rel="stylesheet" href=" http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css";> <style> #A, #B, #C, #D, #E, #F, #G{text-align:center;margin-bottom:20px;} #A{background:#ccc;height:72px;margin-top:20px;} #B{background:#ddd;height:128px;} #C{background:#eee;} #D{background:#888;height:72px;} #E{background:#999;height:508px;} #F{background:#666;height:602px;position:relative;top:-92px;} </style> </head> <body> <div class="container"> <div class="row"> <div id="A" class="span12"><h2>A [span12] (ad)</h2></div> </div><!-- /row --> <div class="row"> <div id="B" class="span2"><h2>B [span2] (logo)</h2></div> <div id="C" class="span10"><h2>C[span10](navigation bar)</h2></div> <div id="D" class="span6"><h2>D [span6] (anouces)</h2></div> <div id="E" class="span8"><h2>E [span2] (content area)</h2></div> <div id="F" class="span4"><h2>F [span6] (sidebar)</h2></div> </div><!-- /row --> </div><!-- /container --> </body> </html> Phil DoughtyWeb Designer / Guitarist Phone: +971 50 8879936 On 12 June 2012 19:51, 0zz <[email protected]> wrote: > Hello, world! > Can anyone suggest a proper coding for this layout: > http://i50.tinypic.com/2nten29.png > It needs to be fluid and blocks should follow the alphabetical order, > if possible.. > Thank you! I've lost 10% of my hair trying to figure it out.
