I basically have a 3 dive structure, Header on top, Left and Right below.
And if you want to count it, a footer.
The Header, Left, and Right are all located inside the Div Main. Left is set as a margin from the right. Right is set as a float. When Left expands, Main expands. When Right expands, it goes right over Main. But only in Firefox.
Which once again proves my point, it's easier to program quirky than correctly.
I don't care how many times I use Divs they ever seemt o act the same way twice. Please let me know what I am doing wrong.
.css
Code:
html, body {
border:0;
margin:0;
padding:0;
}
body {
background: #edecec;
text-align:center;
min width:882px;
}
.main {
background-color:#ffffff;
margin:0 auto;
width:882px;
text-align:left;
border-left:3px solid #999999;
border-right:3px solid #999999;
}
.left {
margin-right:675px;
background: url(images/nav.gif) no-repeat top left;
padding-top:65px;
padding-left:10px;
padding-bottom:10px;
}
.right {
float: right;
width: 666px;
display: block;
color:#FFFFFF;
padding: 3px 5px 0 5px;
}
.foot {
margin:0 auto;
width:888px;
text-align:left;
height:18px;
padding-top:18px;
font-size:12px;
background:url("http://www.webmaster-talk.com/images/footer.gif") no-repeat top left;
background-color:#ffffff;
}
.head {
background: url(images/header.gif) no-repeat top left;
height: 149px;
color:#ffffff;
font-size: 2em;
}
HTML
HTML Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Radtke And Associates, Inc. - Develop | Design | Produce</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
<script type="text/javascript" src="sdmenu/sdmenu.js">
</script>
<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>
</head>
<body>
<div class="main">
<div class="head">
</div>
<div class="right">
<img src="http://www.webmaster-talk.com/images/welcome.gif">
</div>
<div class="left">
<div class="sdmenu" id="my_menu">
<div>
<span>About Us</span>
<a href="#">Company Overview</a>
<a href="#">Staff</a>
<a href="#">Locations</a>
<a href="#">Careers</a>
</div>
<div>
<span>Services</span>
<a href="#">Engineering</a>
<a href="#">Surveying</a>
<a href="#">Architectural</a>
<a href="#">Project Management</a>
<a href="#">CAD Resource</a>
<a href="#">Mapping</a>
<a href="#">Plan Library</a>
</div>
<div>
<span>Company News</span>
<a href="#">Company News</a>
</div>
<div>
<span>FAQ's</span>
<a href="#">FAQ's</a>
</div>
<div>
<span>Links</span>
<a href="#">Links</a>
</div>
<div>
<span>Contact Us</span>
<a href="#">Contact Us</span>
</div>
</div>
</div>
</div>
<div class="foot">
</div>
</body>
</html>
And for your visual pleasure, the live version (use FIREFOX only)
http://radtke.cgsart.com/v7/
Thanks!
Last edited by cruizer : 10-17-2008 at 12:45 AM.
|
