Solved

grid layout basic DW

Posted on 2013-05-20
8
275 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 52

Expert Comment

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

Author Comment

by:jagguy
Comment Utility
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 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
0
 

Author Comment

by:jagguy
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
Comment Utility
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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
Comment Utility
The grid is about width not height.
0
 

Author Comment

by:jagguy
Comment Utility
ok , I take that as an answer.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Summernote and form validation 10 37
CSS grid style change 2 13
SVG Star 4 16
Angular - filter - one works but other doesn't 13 23
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

771 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now