adding content pushes next div down

I am SO close. The layout has {div}s with fixed heights and fluid widths, except the one with text which is fluid width.
I'd got the layout adjusted great in ff, until I tried to expand {div id="orange"} with another photo. It throws the text box "main" down. The effect i'm going for is what it looks like with only one photo in "orange", mainly that the main box goes up over the green topper.
The other problem I haven't yet solved is that on Mac ie the text within "main" get pushed over inside the box, roughly 200px. Holly Hack didn't fix.

 body {
margin: 0;
padding: 0;
}
#contain {
position: absolute;
width: 100%;
margin: 0;
padding: 0;
}
/* layout
--------------*/
#top {
height: 100px;
width: 100%;
background-color: #898741;
}
#toplink {
height: 20px;
width: 300px;
position: absolute;
top: 60px;
}
#bkgrnd1 {
width: 100%;
background-image: url(images/colorsb.jpg);
}
#logo {
float: left;
width: 120px;
height: 100px;
padding-top: 50px;
padding-left: 30px;
}
#orange {
margin-left: 183px;
width: 130px;
background-color: #d98927;
}
#main {
position: relative;
top: -240px;
left: 313px;
width: 54%;
background-color: #e9b97f;
border: 1px solid #FFFFFF;
margin: 0;
padding: 0;
}
#btm {
height: 225px;
width: 100%;
background-color: #898741;
margin-top: -325px;
}
#btmlinks {
height: 25px;
width: 473px;
padding-left: 337px;
padding-top: 80px;
}
#drkgreen {
height: 138px;
width: 313px;
background-color: #676900;
float: left;
margin-top: -300px;
}

<?xml version="1.0" encoding="iso-8859-1"?><!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contain"> 
 <div id="top">&nbsp; 
 </div>
 <div id="toplink"> 
 <p>links1</p>
 </div> 
 <div id="bkgrnd1"> 
 <div id="logo"><img src="image.gif" width="116" height="74" border="0" /> 
 </div>
 <div id="orange"> 
 <div align="center"><img src="image.jpg" width="110" height="148" /><br />
 <img src="image.jpg" width="110" height="148" /> <br />
 <br />
 </div>
 </div>
 <div id="main"> 
 <p>text</p>
 </div>
 <div id="btm"> 
 <div id="btmlinks"> 
 <p>links2</p>
 </div>
 </div>
 <div id="drkgreen"> 
 <p>&nbsp;</p>
 </div>
 </div>
</div>
</body>
</html>

Thanks for your input!

#footer { background-color:#898741; clear:left; margin-top: -120px; padding: 0 0 30px 0; } #bottomnav { background: #898741; font-size:0.8em; text-align:left; margin-left:40%; } .sidenav { float: left; margin: -120px 0 0 0; padding: 0; background-color: #676900; text-align: right; width:40%; voice-family: "\"}\""; voice-family:inherit; width:40%; } html>body .sidenav { width:40%; }

adding content pushes next div down

but divs are next to each other in parent

sldesigns

sldesigns

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week