I am no expert with fluid layouts but the below markup now appears to be fluid. I've commented the /* margin-bottom:20px; */ to remove vertical spacing.
The vertical space between the columns/blocks uses bootstraps default
To remove the vertical space you'll need to play around with the:
.row-fluid [class*="span"] {margin-left: *???**%*;}
Once you do that, you'll wanna change the widths of your grid blocks ie:
.row-fluid .span8 {width: 65.95744680199999%;}
Another problem (depending on how pedantic you are) you'll notice using
fluid%,
the columns don't always align perfectly - check the screen shot.
[image: Inline images 1]
I think it's do-able but be ready to pull out more hair (:
<!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:92px;}
#E{background:#999;height:508px;}
#F{background:#666;height:602px;position:relative;top:-92px;}
.row-fluid [class*="span"] {margin-left: ???%;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div id="A" class="span12"><h2>A [span12] (ad)</h2></div>
</div><!-- /row -->
<div class="row-fluid">
<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><!-- /row -->
<div class="row-fluid">
<div id="E" class="span8"><h2>E [span8] (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 13 June 2012 12:01, 0zz <[email protected]> wrote:
> Thank you, Phil! This looks great with fixed height and width..
>
> However I need a fluid liquid layout. And, in fact, no space is
> required between blocks.
> I guess smth like this should work, but I'm not sure if I've nested
> cells properly:
>
> <div class="container-fluid">
>
> <div class="row-fluid">
> <div class="span12">
> <h2>A [span12] (ad)</h2>
> </div>
> </div><!-- /row -->
>
> <div class="row-fluid">
> <div class="span12">
> C[span10](navigation bar)
> </div>
> </div>
>
> <div class="row-fluid">
> <div class="span8">
>
> <div class="row-fluid">
> <div class="span2">
> <h4>B [span2] (logo)</h4>
> </div>
>
> <div class="span6">
> <h2>D [span6] (anouces)</h2>
> </div>
> </div>
>
> <div class="show2">
> <h2>E [span2] (content area)</h2>
> </div>
>
> </div>
> <div id="sidebar" class="span4">
> <h2>F [span6] (sidebar)</h2>
> </div>
>
> </div>
>
> </div>
>
> ------
>
> On 12 июн, 22:14, Phil Doughty <[email protected]> wrote:
> > 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...
> >
>
<<image.png>>
