Too much margin for some reason

jordanwb · October 23, 2008

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Theme</title>
<style type="text/css">
<!--
BODY
{
background-color: #e4e4e4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}
DIV
{
margin: 0px;
padding: 0px;
}
#wrapper
{
width: 90%;
margin: 0px auto 0px auto;
}
#header
{

}
#header .content
{
background-color: #fff;
border: 1px solid #aaa;
margin-bottom: 20px;
}
#breadcrumb
{

}
#breadcrumb .content
{
background-color: #fff;
border: 1px solid #aaa;
margin-bottom: 20px;
}
#row_1
{
border-collapse: collapse;
}
#area_1
{
float: left;
width: 200px;
}
#area_1 .content
{
background-color: #fff;
border: 1px solid #aaa;
margin-bottom: 20px;
}
#primary_area
{
margin-left: 201px;
margin-right: 201px;
}
#primary_area .content
{
background-color: #fff;
border: 1px solid #aaa;
margin: 0px 20px 20px 20px;
}
#area_2
{
float: right;
width: 200px;
}
#area_2 .content
{
background-color: #fff;
border: 1px solid #aaa;
margin-bottom: 20px;
}
#row_2
{
border-collapse: collapse;
clear: both;
}
#area_3
{
float: left;
width: 50%;
}
#area_3 .content
{
background-color: #fff;
border: 1px solid #aaa;
margin-bottom: 20px;
margin-right: 10px;
}
#area_4
{
float: right;
width: 50%;
}
#area_4 .content
{
background-color: #fff;
border: 1px solid #aaa;
margin-bottom: 20px;
margin-left: 10px;
}
#footer
{
clear: both;
}
#footer .content
{
background-color: #fff;
border: 1px solid #aaa;
}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="header">
		<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tempus pharetra nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
	</div>
	<div id="breadcrumb">
		<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tempus pharetra nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
	</div>
	<div id="row_1">
		<div id="area_1">
			<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tempus pharetra nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
		</div>
		<div id="area_2">
			<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tempus pharetra nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
		</div>
		<div id="primary_area">
			<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tempus pharetra nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
		</div>
	</div>
	<div id="row_2">
		<div id="area_3">
			<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tempus pharetra nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
		</div>
		<div id="area_4">
			<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tempus pharetra nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
		</div>
	</div>
	<div id="footer">
		<div class="content">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tempus pharetra nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
		</div>
	</div>
</div>
</body>
</html>

IE puts too much margin between the third row and the fourth, and the fourth row and the fifth row.

F1Fan · October 23, 2008

The margin for "wrapper" sets the margin around the outside of div "wrapper." Try setting the margin for the row divs.

jordanwb · October 23, 2008

There may be multiple content DIV's in each of the areas. If there was going to be only one I would do that. Interestingly if I set a border to #area_1 and #area_2 everything is fine, but the boxes aren't aligned.

Sign In

Too much margin for some reason

Recommended Posts

jordanwb

Link to comment

Share on other sites

F1Fan

Link to comment

Share on other sites

jordanwb

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information