Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

grid layout basic DW

Posted on 2013-05-20
8
Medium Priority
?
284 Views
Last Modified: 2013-05-21
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 ?


<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>

Open in new window

0
Comment
Question by:jagguy
  • 4
  • 4
8 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39183118
You shouldn't need to worry about the heights based on your sample
0
 

Author Comment

by:jagguy
ID: 39183203
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
<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>

Open in new window

0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39183220
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jagguy
ID: 39183285
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?
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39183299
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                      |
|---------------------------------------|
0
 

Author Comment

by:jagguy
ID: 39183361
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.
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39183383
The grid is about width not height.
0
 

Author Comment

by:jagguy
ID: 39183718
ok , I take that as an answer.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question