margin top on div won't work

Hi everyone,

In the following css code, I'm floating a left column but then wanted to put some distance between the column and the h1 element above it by using margin-top: 36px

#primary {
	float: left;
	margin-top: 36px;
	width: 596px;
	}

Code (markup):

For some reason the margin won't appear and I can't work out why.

In the html code below, there's an h1 directly above this div:

<h1><a href="#">Company name</a></h1>

and this is floated using the following code:


#header h1 {
	float: left;
	margin-left: 16px;
	width: 403px;
	}

Code (markup):

I know that I can add some margin bottom to h1 but I just really want to find out why I can't add it to the top of the div.

All the relevant html and css is below and I wondered if anyone knew what might be going on?

Appreciate any help.


<!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=UTF-8" />
<title>Untitled</title>

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen"/>


</head>

<body id="home">
<div id="content-wrapper">

<div id="header" class="clearfix">
	
		<ul class="clearfix">
			<li><a href="index.html">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Treatment</a></li>
			<li><a href="#">Seminars</a></li>
			<li><a href="#">Testimonials</a></li>
			<li><a href="#">Location map</a></li>
			<li><a href="#"><em>Contact Us</em></a></li>
		</ul>
		<h1><a href="#">Company name</a></h1>

</div> <!-- end #header -->

<div id="primary">
		<div class="feature">
        <h2>Towards better health</h2>
			<p>
			Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.</p>
		</div>

Code (markup):



body {
	background: #f7f6e9 url(../img/bg-stripe.gif) repeat-x;
	font: 11px/16px Arial, sans-serif;
	color: #000;
	text-align: center;
	}

/* =Links
-----------------------------------------------------------------------------*/
a:link, a:active, a:visited {
	color: #b10135;
	text-decoration: none;
	}

a:hover {
	color: #000;
	}


/* =Headers and navigation
-----------------------------------------------------------------------------*/

#header ul {
	margin: 20px 16px 20px;
	}

#header li {
	float: left;
	}

#header ul a {
	float: left;
	margin-right: 25px;
	padding: 0 0 3px;
	/*color: #f0eee7;*/
	font-size: 12px;
	text-transform: uppercase;
	}	
	
#header ul a:hover {
	padding-bottom: 2px;
	border-bottom: 1px solid #423b2b;
	}	
	
#header ul a em {
	font-style: normal;
	color: #807d6a;
	}

#header h1 {
	float: left;
	margin-left: 16px;
	width: 403px;
	}

#header h1 a {
	display: block;
	width: 403px;
	height: 73px;
	text-indent: -9999px;
	background: url(../img/logo.gif) no-repeat;
	}




/* =Layout
-----------------------------------------------------------------------------*/

#content-wrapper {
	position: relative;
	margin: 0 auto;
	width: 900px;
	text-align: left;
	}

Main Content ---------------------------- */

#primary {
	float: left;
	margin-top: 36px;
	width: 596px;
	}
	
#primary h3 {
	color: #b10135;
	font-size: 14px;
	text-transform: uppercase;
	}	
	
#primary .feature {
	position: relative;
	height: 269px;
	overflow: auto;
	background: #f7f6e9 url(../img/bg-family.jpg) no-repeat;
	}

#primary .feature h2 { 
	text-indent: -9999px;
	}


#primary .feature p { 
	position: absolute;
	top: 60px;
	left: 36px;
	width: 278px;
	height: 158px;
	text-indent: -9999px;
	background: url(../img/text.png) no-repeat;
	}

Code (markup):

Log in or Sign up

margin top on div won't work

gwh Active Member

gwh Active Member

Log in or Sign up

margin top on div won't work

gwh Active Member

gwh Active Member

Useful Searches