PDA

View Full Version : Divs margin

elmu
04-05-2008, 01:55 PM
Hello,

I have a small test code below. I want to display box and box2 div with a 20px margin. I want 20px from the top and 40px(2x20px) between the boxes.

My problems with my code:
1. In firefox I got 0px on the top, but there is a 20px space under the header div.
2. Both in IE and Firefox there is only 20px between the 2 boxes and not 2x20px.
3. In IE there is a small gap between the sidebar and content.

I think I don't know specialities about div tags margin handling.
How should I correct these errors?

Thanks in advance!

<!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>CSS Test</title>
<style type="text/css">
<!--
#header {
background-color: #999999;
margin: 0px;
padding: 0px;
height: 150px;
width: 800px;
}

#center {
background-color: #CCCCCC;
margin: 0px;
padding: 0px;
width: 800px;
}

#center #content {
background-color: #990000;
padding: 0px;
width: 600px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 190px;
border:0px;
}
#center #sidebar {
background-color: #0000CC;
margin: 0px;
padding: 0px;
float: left;
width: 190px;
border:0px;
}
#center #content #box {
background-color: #009900;
margin: 20px;
width: 500px;
}

#center #content #box2 {
background-color: #003300;
margin: 20px;
width: 500px;
}

-->
</style>
</head>

<body>
<div id="header"></div>
<div id="center">
<div id="sidebar">Menu-1<br/>Menu-1<br/>Menu-1<br/>Menu-1<br/></div>
<div id="content">
<div id="box">Box<br/>Box<br/></div>
<div id="box2">Box2<br/>Box2<br/></div>
</div>
</div>
</body>
</html>
effpeetee
04-05-2008, 03:21 PM
Hello,

I have a small test code below. I want to display box and box2 div with a 20px margin. I want 20px from the top and 40px(2x20px) between the boxes.

My problems with my code:
1. In firefox I got 0px on the top, but there is a 20px space under the header div.
2. Both in IE and Firefox there is only 20px between the 2 boxes and not 2x20px.
3. In IE there is a small gap between the sidebar and content.

I think I don't know specialities about div tags margin handling.
How should I correct these errors?

Thanks in advance!

<!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>CSS Test</title>
<style type="text/css">
<!--
#header {
background-color: #999999;
margin: 0px;
padding: 0px;
height: 150px;
width: 800px;
}

#center {
background-color: #CCCCCC;
margin: 0px;
padding: 0px;
width: 800px;
}

#center #content {
background-color: #990000;
padding: 0px;
width: 600px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 190px;
border:0px;
}
#center #sidebar {
background-color: #0000CC;
margin: 0px;
padding: 0px;
float: left;
width: 190px;
border:0px;
}
#center #content #box {
background-color: #009900;
margin: 20px;
width: 500px;
}

#center #content #box2 {
background-color: #003300;
margin: 20px;
width: 500px;
}

-->
</style>
</head>

<body>
<div id="header"></div>
<div id="center">
<div id="sidebar">Menu-1<br/>Menu-1<br/>Menu-1<br/>Menu-1<br/></div>
<div id="content">
<div id="box">Box<br/>Box<br/></div>
<div id="box2">Box2<br/>Box2<br/></div>
</div>
</div>
</body>
</html>

Try starting your css code with

* {
margin: 0;
padding: 0;
border: none;
}
html, body {
height:100%;
width:100%;
}

It will bring all browsers to a starting zero. Not all browsers start with the same defaults.

Frank
elmu
04-05-2008, 03:27 PM
Unfortunately it didn't solve the problem :(
_Aerospace_Eng_
04-05-2008, 03:43 PM
Its right. You specified margin:20px meaning its going to have a top margin of 20px, right margin of 20px, bottom margin of 20px, and left margin of 20px. If you want 40px in between the header and the content boxes use 40px instead. And to fix your IE issue, the easiest thing to do would be to float your #content box to the left, get rid of the left margin and move your header into the #center div.
<!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>CSS Test</title>
<style type="text/css">
<!--
#header {
background-color: #999999;
margin: 0px;
padding: 0px;
height: 150px;
width: 800px;
}

#center {
background-color: #CCCCCC;
margin: 0 auto;
padding: 0px;
width: 800px;
}

#center #content {
background-color: #990000;
padding: 0px;
width: 600px;
float:left;
}
#center #sidebar {
background-color: #0000CC;
margin: 0px;
padding: 0px;
float: left;
width: 190px;
border:0px;
}
#center #content #box {
background-color: #009900;
margin: 20px;
width: 500px;
}

#center #content #box2 {
background-color: #003300;
margin: 20px;
width: 500px;
}
.clear {
clear:both;
font-size:0;
line-height:0;
}
-->
</style>
</head>

<body>
<div id="center">
<div id="header"></div>
<div id="sidebar">Menu-1<br/>Menu-1<br/>Menu-1<br/>Menu-1<br/></div>
<div id="content">
<div id="box">Box<br/>Box<br/></div>
<div id="box2">Box2<br/>Box2<br/></div>
</div>
<div class="clear">&nbsp;</div>
</div>
</body>
</html>