I'm trying to create a fluid layout with http://www.tinyfluidgrid.com/
I want to create a 2 columns layout (grid_12) inside the body (grid_16) but the left bar (grid_4) and the right bar doesn't wrap the whole body so what should I do:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>#</title>
<link rel="stylesheet" href="grid.css" type="text/css" media="screen" charset="utf-8">
<style type="text/css" media="screen">
/*
& A little bit of styling
*/
body {
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
h1 {
border: solid 1px black;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="grid_24">
<h1>topbar 24</h1>
</div>
<div class="grid_24">
<h1>logo 24</h1>
</div>
<div class="grid_24">
<h1>menu 24</h1>
</div>
<div class="grid_4">
<h1>4</h1>
</div>
<!-- -->
<div class="grid_16">
<h1>16</h1>
<div class="grid_12">
<h1>12/16</h1>
</div>
<div class="grid_12">
<h1>12/16</h1>
</div>
</div>
<!-- -->
<div class="grid_4">
<h1>4</h1>
</div>
<div class="grid_24">
<h1>24</h1>
</div>
</div>
</body>
</html>
Below the css:
/*
& Columns : 24
& Gutter %: 20%
& MinWidth: 800px
& MaxWidth: 1200px
*/
.grid_1 { width: 3.3333333333333%; }
.grid_2 { width: 7.5%; }
.grid_3 { width: 11.666666666667%; }
.grid_4 { width: 15.833333333333%; }
.grid_5 { width: 20%; }
.grid_6 { width: 24.166666666667%; }
.grid_7 { width: 28.333333333333%; }
.grid_8 { width: 32.5%; }
.grid_9 { width: 36.666666666667%; }
.grid_10 { width: 40.833333333333%; }
.grid_11 { width: 45%; }
.grid_12 { width: 49.166666666667%; }
.grid_13 { width: 53.333333333333%; }
.grid_14 { width: 57.5%; }
.grid_15 { width: 61.666666666667%; }
.grid_16 { width: 65.833333333333%; }
.grid_17 { width: 70%; }
.grid_18 { width: 74.166666666667%; }
.grid_19 { width: 78.333333333333%; }
.grid_20 { width: 82.5%; }
.grid_21 { width: 86.666666666667%; }
.grid_22 { width: 90.833333333333%; }
.grid_23 { width: 95%; }
.grid_24 { width: 99.166666666667%; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23,
.grid_24 {
margin-left: 0.41666666666667%;
margin-right: 0.41666666666667%;
float: left;
display: block;
}
.alpha{margin-left:0px;}
.omega{margin-right:0px;}
.container{
min-width: 800px;
max-width: 1200px;
margin: auto;
}
/* @
* tinyfluidgrid.com
& girlfriendnyc.com
*/
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}