Forum Moderators: open
Help!
CSS File
body, html {
margin: 0;
padding: 0;
background-color: #B0C4DE;
background-image: url(images/bg5.gif);
line-height: 1.3em;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: small;
color: #000000;
}
div#wrapper {
width: 780px;
margin: 30px auto;
background: #fdf8f2;
border: 2px #3d7292 solid;
}
div#header {
background-color: #ffffff;
height: 90px;
width: 780px;
}
div#main {
position: relative;
margin: 0px auto;
background: #ffffff;
}
div#maincontent {
margin-left: 191px;
top: 0;
left: 0;
bottom: 0;
background: #eeeeee;
padding: 10px;
color: #000000;
}
div#sidebar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
padding: 10px 5px;
width: 180px;
background: #cccccc;
border-right: 1px solid black;
}
div#footer {
width: 100%;
background: #aec3e5;
border-bottom: 1px #aec3e5 solid;
border-top: 1px #000000 solid;
}
html file below:
---------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Kansas Torch Run</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="core_style.css">
</head>
<body>
<!-- wrapper element is the parent element to all elements of web page -->
<div id="wrapper">
<div id="header"><img src="images/header.jpg" alt="Kansas Special Olympics"></div>
<!-- Blue Horizontal Navigation -->
<div id="blue-navcontainer">
<div id="blue-nav">
<ul>
<li><a href="index.html" class="current"><span>Home</span></a></li>
<li><a href="torch_run.html"><span>Torch Run</span></a></li>
<li><a href="special_olympics.html"><span>Special Olympics</span></a></li>
<li><a href="calendar.html"><span>Calendar</span></a></li>
<li><a href="resources.html"><span>Resources</span></a></li>
<li><a href="donate.html"><span>Donate</span></a></li>
<li><a href="photos.html"><span>Photos</span></a></li>
<li><a href="top_guns.html"><span>Top "Guns"</span></a></li>
<li><a href="contact_us.html" ><span>Contact Us</span></a></li>
</ul>
</div> <!-- blue nav -->
</div> <!-- blue-navcontainer -->
<!-- End Blue Horizontal Navigation -->
<!-- main element is a parent of sidebar, maincontent, footer elements -->
<div id="main">
<!-- maincontent element contains the main information on web page -->
<div id="maincontent">
<h2>MainContent Element</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
</p>
</div> <!--- end maincontent --->
<!-- sidebar contains element to display in the sidebar -->
<div id="sidebar">
<h3>SideBar Element</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div> <!-- sidebar -->
</div> <!-- main -->
<div id="footer">
<p><h2>Footer</h2></p>
</div> <!-- footer -->
</div> <!-- wrapper -->
</body>
</html>
div#main {
position: relative;
margin: 0px auto;
background: #ffffff;
width: 100%; /* to trigger hasLayout=true */
}
leaving left to "auto" (default) on the sidebar might also help - IE has problems positioning when margin/padding is involved and the parent/containing block has not got "layout" specified.
[edited by: SuzyUK at 10:04 am (utc) on April 9, 2008]
