March 18, 2012
trying to put margin around the content div
Question by lostty84
been trying to put margin around content div, but its not working , please help have a look at the html and css is below
<?php require_once("include/session.php");?>
<?php require_once("include/functions.php");?>
<?php include("include/mheader.php");?>
<div id="content">
<h3>
Registration.
</h3>
<p>
Please read the terms and condition before you register
Simply click on register on the home page, and fill in the registration form.
On submission of the registration form, an email will be sent to the registered email on the form, from which you can activate your account
</p>
</div>
<?php include("include/footer.php");?>
the css is below(was thinking #content {margin:10px 10px 10px 10px;} this should do it , but its not working
body,html {
margin: 0;
}
#page {
width: 1060px;
margin: 0 auto;
position: relative
/* is the same as:
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
*/
}
/* sticky footer */
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#outer:after {
clear:both;
display:block;
height:1%;
content:" ";
}
/* ...#003399;#383838; */
/*
CSS for Reacheasy site
*/
html, body {
height:100%;
margin:0;
padding:0;
border:none;
background:#cccccc;
}
#outer {
width:1060px;
margin:auto;
min-height:100%;
margin-top:-52px;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
background: white url(backgrounds/nav-bg.jpg) repeat-y left top
}
* html #outer {
height:100%
}
/*h1,h3 {
font-size: xx-large;
text-shadow: 10px 10px 1px grey;
color: #000;
padding: 2em 0 .2em .4em;
margin: 0;
background: white url(img/header.jpg) repeat-y right;
}*/
ul#nav {
height: 2em;
list-style: none;
margin: 0;
padding: .2em 0;
margin:0;
background:url(img/tabs.gif);
}
ul#nav li {
/*
background: #48f url(img/tabs.gif);
*/
display : block;
background-color : #666666;
float: left;
margin: 0 1px 0 0;
padding-left: 10px;
border-right: 1px solid #A1A1A1;
}
ul#nav a {
background: url(img/tabs.gif) 100% 0;
color: white;
display: block;
float: left;
height: 2em;
line-height: 2em;
padding-right: 10px;
text-decoration: none;
}
ul#nav li.current {
background-color:#666666 ;
background-position: 0 -60px;
}
ul#nav li.current a {
background-position: 100% -60px;
color: #fff;
font-weight: bold;
}
#content {
margin:10px 10px 10px 10px;
}
this is the header
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reacheasy - Foremost website for easy reach of things globally</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link href="members.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="outer">
<div id="page">
<div id="header">
<div id="hlogo">
<span style="float:right;"><img src="img/relogo.jpg" class="logoImage" width="96" height="96"/></span>
</div>
<span style="font-size:small;text-shadow: 10px 10px 1px grey;"><h1>Reacheasy<span style="font-size:small;"><?php echo $_SESSION['username'];?></span></h1></span>
<ul id="nav">
<li class="current"><a href="index.php">Home</a></li>
<li><a href="women.php">Women</a></li>
<li><a href="men.php">Men</a></li>
<li><a href="children.php">Children</a></li>
<li><a href="homeandappliances.php">Home&Appliances</a></li>
<li><a href="visionandsound.php">Vision&Sounds</a></li>
<li><a href="motoring.php">Motoring</a></li>
<li><a href="homemore.php">More</a></li>
<li><a href="howto.php">Help(How to?)</a></li>
</ul>
</div> <!--end of navigation div -->
</div>
the footer
<div id="footer">
© 2012 Reacheasy
<ul id="footlink">
<li><a href="contact.php">Contact us</a></li>
<li><a href="termsandcondition.php">Terms&Condition</a></li>
<li><a href="faq.php">Faq</a></li>
</ul>
</div>
</body>
</html>
Answer by Starx
IMO, this is a problem caused by unclosed tag. As per your post, your <div id="outer"> is not closed. Try to fix that.
I was right. See this validator result
Line 82, Column 7: end tag for “div” omitted, but OMITTAG NO was
specifiedYou may have neglected to close an element, or perhaps you meant to
“self-close” an element, that is, ending it with “/>” instead of “>”.
Update: There is no element with id content on the page you linked, so the rule of margin will not be applied until such element exist on the first place.
