jagguy
asked on
grid layout basic DW
Hi,
To get a basic layout of header and below that is 3 columns for left nav, content and right col and footer I would use a grid like this.
To get the heights of the columns (left,content,right) to line up do I
add another div in each grid as a wrapper and style that with css code ?
To get a basic layout of header and below that is 3 columns for left nav, content and right col and footer I would use a grid like this.
To get the heights of the columns (left,content,right) to line up do I
add another div in each grid as a wrapper and style that with css code ?
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />
<link href="css/960.css" rel="stylesheet" type="text/css" />
<link href="css/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container_12" id="container">
<div class="grid_12 " id="header" >
Content for header</div>
<div class="clear"></div>
<div class="grid_4">
add another div here
left nav
</div>
<div class="grid_4">Content</div>
<div class="grid_4">right </div>
<div class="clear"></div>
<div class="grid_12">footer</div>
<div class="clear"></div>
</div>
You shouldn't need to worry about the heights based on your sample
ASKER
the sample for just that a sample.
if I add some cod then to make the left/right col finish at same level eg say I have a background color for each col
The content could be
if I add some cod then to make the left/right col finish at same level eg say I have a background color for each col
The content could be
<div class="grid_4">
add another div here
left nav
</div>
<div class="grid_4">Content
Essence
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Read more.
Dimensions
The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. View demo.
</div>
<div class="grid_4">right </div>
<div class="clear"></div>
<div class="grid_12">footer</div>
<div class="clear"></div>
</div>
See height balancing https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts
ASKER
we are getting confused a bit here.
I am talking about the situation when using a 960 grid as I know what you do without a grid. for a 960 grid , do I do the same to adjust cols as without a grid or does 960 grid have a different way to do this?
I am talking about the situation when using a 960 grid as I know what you do without a grid. for a 960 grid , do I do the same to adjust cols as without a grid or does 960 grid have a different way to do this?
Sorry about the bad art work, but this is what your code does. The footer will be pushed down by the longest column. If col 1 and col 3 are 300px high and col 2 is 800px high, then the footer will be 800px below the header.
|------------------------- ---------- ----|
| header |
|------------------------- ---------- ----|
| | | |
| col1 | col 2 | col 3|
|------------|------------ --|------- ---|
| footer |
|------------------------- ---------- ----|
|-------------------------
| header |
|-------------------------
| | | |
| col1 | col 2 | col 3|
|------------|------------
| footer |
|-------------------------
ASKER
yes I know but I want all columns to finish on highest col as the example above with a grid.
I ant to push all columns to the height of eg 800px and I am using a grid
.
The question is what difference does using a grid make to this problem as I will to wrap up grid containers in another div using the way you mentioned.
I ant to push all columns to the height of eg 800px and I am using a grid
.
The question is what difference does using a grid make to this problem as I will to wrap up grid containers in another div using the way you mentioned.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ok , I take that as an answer.