design website with DIVs

**faamugol** · Dec 22, 2008 09:22

Dear, I need your help for the next:

I want keep my website middle of the screen with equal space left and right

The width of the site is 860px (container) and the height is up to the content

The container has 5 DIVs as follow:

container: width:860px; heigth auto
header: width:860px; heigth 150px
left:width:140px; heigth auto
middle:width:560px; heigth auto
right:width:140px; heigth auto
footer:width:860px; heigth 20px;

How can do this with css ?

Thanks in advance,

**joaquin_win** · Dec 22, 2008 09:52

Hi faamugol, if you give the container div a css rule with margin:auto it should center everything (assuming that everything is inside that div).

Sitepoint has a great tutorial on css layouts: http://www.sitepoint.com/article/roc...d-css-layouts/

**faamugol** · Dec 22, 2008 11:39

Here is my code but I don't get it centered.

BODY
{
FONT-SIZE: 13px;
BACKGROUND: #B2B2B2 url(back.png) repeat-x;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING: 0px;
FONT-FAMILY: Verdana;
}

#contenair
{
MARGIN: 2px auto 0px;
WIDTH: 860px;
POSITION: relative;
BACKGROUND-COLOR: #B2B2B2;
}

#header
{
HEIGHT: 150px;
WIDTH: 860px;
MARGIN-TOP: 0px;
MARGIN-LEFT: 1px;
BACKGROUND: #dddddd;
}

#menuwelcome
{
WIDTH: 860px;
height:20px;
BACKGROUND: #FF9934;
position:absolute;
}

#center
{
WIDTH: 560px;
MARGIN-BOTTOM: 5px;
BACKGROUND: #fffbbb;
float:left;
}

#left
{
MARGIN-BOTTOM: 5px;
WIDTH: 140px;
HEIGHT: 140px;
MARGIN-LEFT: 2px;
BACKGROUND: #ffffff;
float:left;
}

#right
{
MARGIN-BOTTOM: 5px;
HEIGHT: 250px;
WIDTH: 160px;
BACKGROUND: #ffffff;
float:right;
}

#pied
{
HEIGHT: 20px;
WIDTH: 860px;
BACKGROUND: #FF9933;
clear:both;
}

thanks

**Gears** · Dec 22, 2008 13:23

#contenair
{
MARGIN: 2px auto 0px;
WIDTH: 860px;
POSITION: relative;
BACKGROUND-COLOR: #B2B2B2;
}

That should be:

Code:

margin: 2px auto 0px auto;

**Centauri** · Dec 22, 2008 23:38

2px auto 0px is ok - that means 2px top, 0px bottom and auto both sides.

What browser(s) are you checking this in, and what doctype do you have?

**Gears** · Dec 23, 2008 07:46

Originally Posted by Centauri

2px auto 0px is ok - that means 2px top, 0px bottom and auto both sides.

What browser(s) are you checking this in, and what doctype do you have?

Oh really. I thought it was either "2px auto;" or "2px auto 2px auto;" (2 or 4 terms). Thanks for clearing that up.

**antirem** · Dec 23, 2008 12:49

in css..
* {margin:0px;padding:0px;}
#divname {width:1000px;height:auto;}

change the width to the respective width ;D

you can also add {float:left;} to make two divs align next to each other.

**bemmott** · Dec 25, 2008 14:00

Would it be picky of me to point out that container is mispelled in his example of his code?
Here:

Code:

#contenair
{
MARGIN: 2px auto 0px;
WIDTH: 860px;
POSITION: relative;
BACKGROUND-COLOR: #B2B2B2;
}

**uringgogo** · Dec 31, 2008 00:59

Here is the code. If the height is auto, you don't need to set it. The default value is auto.

This code is based on document.body.clientWidth = 1004px in IE 6. In FF, a little bit left coz FF does not show scrollbar.

We will launch a series of layout generators based on parellel design.
------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 Column CSS Layout - parellel design</title>
<style type='text/css'>
.header{
position: relative;
float: left;
left: 72px;
width: 860px;
height: 150px;
background-color: #6699cc
}
.container{
position: relative;
float: left;
left: 72px;
width: 860px;
background-color: #cccccc
}
.left{
position: relative;
float: left;
left: 0px;
width: 140px;
background-color: #ccccff
}
.middle{
position: relative;
float: left;
left: 10px;
width: 560px;
background-color: #ccccff
}
.right{
position: relative;
float: right;
right: 0px;
width: 140px;
background-color: #ccccff
}
.footer{
position: relative;
float: left;
left: 72px;
width: 860px;
height: 20px;
background-color: #cfcfcf
}
.bottom{
clear: both;
width: 100%;
float: left;
position: relative;
background-color: #e7e7de
}
body {
border-width: 0px;
padding: 0px;
margin: 0px;
font-size: 90%
width: 100%;
min-width: 1003px;
}
</style>
</head>
<body>
<div class="bottom">
<div class="header">
header
</div>
<div class="container">
<div class="left">
left1
</div>
<div class="middle">
left2
</div>
<div class="right">
right
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</HTML>

**Centauri** · Dec 31, 2008 01:21

What is the .bottom div for? - the name does not match the purpose. The .container div can do what it says and contain the whole site, and auto side margins will centre the site. The .header does not need to be floated, nor a width set. Neither does the .footer, which has its clear property set to appear below the floats.

I also question the use of the XHTML transitional doctype - why?

Try:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>3 Column CSS Layout - parellel design</title>
<style type='text/css'>
body {
	border: 0;
	padding: 0px;
	margin: 0px;
	font-size: 90&#37;
	background-color: #cccccc;
}
.container{
	width: 860px;
	margin: 0 auto;
}
.header{
	height: 150px;
	background-color: #6699cc
}
.left{
	float: left;
	width: 140px;
	background-color: #ccccff
}
.middle{
	float: left;
	width: 560px;
	background-color: #ccccff;
	margin-left: 10px;
}
.right{
	float: right;
	width: 140px;
	background-color: #ccccff
}
.footer{
	height: 20px;
	background-color: #cfcfcf;
	clear: both;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="container">
	<div class="header"> header </div>
	<div class="left"> left1 </div>
	<div class="middle"> left2 </div>
	<div class="right"> right </div>
	<div class="footer"> footer </div>
</div>
</body>
</html>

**uringgogo** · Dec 31, 2008 02:50

.bottom - is used to set background when the layout is the part of the page. Here could set it in body tag.

The main difference is you use margin and I use left. At the beginning I also used the margin to seperate the columns, but it worked not well in FF in the whole range. (I mean I drag the sliders to change the widths of the columns. ). Will come back if I could re-produce the error.

**uringgogo** · Jan 7, 2009 23:05

Sorry for the late reply. The main reason is my wireless card run out of money.

This post let me have an comparison between 2 layout techniques - using left and margin.

Here's 2 links you could see their differences.

3 column layout using margin. 3 column layout using left.

The design using left applies both fixed and liquid layouts. But the design using margin only applies to fixed layout. This is the main difference.

In fixed layout, you could not set side gutters by using margin-left for the left column in IE 6. In IE 6, the right column of the above link should slide down coz I set side gutters at the beginning.

margin: 0 auto is a great syntax. It lets the browser to center the layout automatically. But if I set the background-color in containner, different browers display differently.

Why I use header {float:left}?

In FF, when you add a <H2> tag in the header and the height of header is not set, the <h2> will come out of the header. Using {float:left} could solve the problem. But I have to set width of the header. It's easier to determine width than height.

So the design using left is a trouble-free solution. And the design using margin is a concise design but may need more care about the problems.

I removed the .bottom to avoid confusion. The wrapper div should be able to be placed outside.

**Centauri** · Jan 8, 2009 01:06

Originally Posted by uringgogo

In fixed layout, you could not set side gutters by using margin-left for the left column in IE 6.

This is due to IE6's well-documented doubled float margin bug, which can be cured by setting inline display on the float.

Originally Posted by uringgogo

But if I set the background-color in containner, different browers display differently.

Most likely due to not clearing floats - a container will not naturally surround floated content (except in IE which gets it wrong).

Originally Posted by uringgogo

In FF, when you add a <H2> tag in the header and the height of header is not set, the <h2> will come out of the header. Using {float:left} could solve the problem. But I have to set width of the header. It's easier to determine width than height.

Again, most likely due to floating the <h2> and not clearing that float.

Originally Posted by uringgogo

So the design using left is a trouble-free solution. And the design using margin is a concise design but may need more care about the problems.

Using "left" is relatively shifting the display of the element, but the element still occupies its original space - using this as a general positioning scheme can produce lots of problems later on in the design.

Floats are very useful, but using more and more floats to overcome perceived problems due to not understanding their use can lead to further complications.

User Tag List

Thread: design website with DIVs

Thread Tools

Display

design website with DIVs

Bookmarks

Bookmarks

Posting Permissions