Floating Div Overlapping Encompassing Div

**cruizer** · 01:45 AM

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!

**Brian07002** · 02:40 AM

You forgot to add

px after 0 in your style sheet for main class

Supposed to be 0px;

Hth,

And oh by the way, I just spent alot of time figuring out css, and now I *think* I finally fixed something...Did I? Oh boy, I can't wait to find out...Seriously! Also check the top of your css, you missed the px on those too, just seen in the footer too you have 0 no px after it.

**simster** · 10-17-2008, 03:57 AM

px is the default and if it wasnt

0anything is 0

**Brian07002** · 10-17-2008, 05:24 AM

well, it was a shot

**cruizer** · 10-17-2008, 12:34 PM

Brian,
Unfortunately Simster is right. No tag after the number assumes px. Just to check though, I did put them in, and it did not fix my problem.

**LadynRed** · 10-17-2008, 04:39 PM

Quote:

Which once again proves my point, it's easier to program quirky than correctly.

It's ALWAYS easier to do something the sloppy way vs. the correct way.

Quote:

px after 0 in your style sheet for main class

Supposed to be 0px;

NO, it's not. If there is NO VALUE then it is not necessary to specify a unit.

Why are you floating the right first then applying a 675px negative margin to left ?
1 - float them both left, use margins and padding to space them.
2- if you want something to expand and contract, you cannot use fixed width, you'll have to use percentages or ems to get things to 'stretch'. Even at that, left and right cannot be wider than the #main container.

3 - you need to CLEAR your floats - #main isn't "wrapping" around anything as it stands.