CSS Forum

**jim.thornton** · 08:21 PM

Looks like I'm back to my trusty resource here. I'm having trouble with two elements:

1) The orange #header div is suppose to render as it does in FF. That is to say that it is suppose to overlap the sidebar on the left. In IE it gets cut-off. I've tried setting a z-index to it and it still does not work.

2) The white background of #container (IE & FF) does not extend to the end of the elements that are in it. I've cleared my floats and it still doesn't work.

Can someone please help me here. This is kind of a rush for me to get this done.

HTML:

Code:

<!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" xml:lang="en" lang="en">

<head>
<title>:. Simply-Pilates -</title>

<meta http-equiv="content-type" content="text/html" />
<meta name="robots" content="noindex,nofollow" />

<link href="css/template_css.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
	<div id="container">
 <div id="mainbody">
 	  <div id="banner">
	  </div>  <!-- #banner -->
	  
	  <div id="header">
	  	   <div class="moduletable-headertext">
		   		<div class="headerimg"></div>
		   		<h1>Welcome to my SITE</h1> 
				<h3>My slogan goes here</h3> 
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sit amet ante non metus lobortis ornare. Donec diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla varius, orci nec luctus vehicula.</p>
		   </div>  <!-- .moduletable-headertext -->
	  </div>  <!-- #header -->

	  <div id="contentarea">
  	  	   <div id="rightside">
	  	   </div>  <!-- #rightside -->
			
		   <div id="maincontent">				   
		   </div>  <!-- #maincontent -->
		   
		   <div id="bottomcontent">
		   		<div class="line"></div>  <!-- .line -->
				<div class="moduletable-bottomcontent"></div>  <!-- .moduletable-bottomcontent -->
		   </div>  <!-- #bottomcontent -->

	  </div>  <!-- #contentarea -->
	  
	  <div id="footer"></div>			  
 </div><!-- #mainbody -->
		 
		 <div id="sidebar">
		 </div>  <!-- #sidebar -->

		 <div class="clrboth"></div>
	</div>  <!-- #container -->
</body>
</html>

CSS:

Code:

/* CSS Document */
/****************************************************************
Colors:
   #b0b0b0 Border colors
   #d3d3d3 Footer background
   
/****************************************************************/
/*   LAYOUT
/****************************************************************/

* {
   padding: 0;
   margin: 0;
}

body {
   font-size: 88%;
   background: lightgrey;
}

h1 { font-size: 1.4em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1.0em; }
h6 { font-size: 1.0em; }

h1, h2, h3, h4, h5, h6, p, blockquote {
   margin-bottom: .8em;
}

#container {
   width: 980px;
   margin: 0 auto;
   background: white;
}

#mainbody {
   position: relative;
   width: 730px;
   height: 700px;
   float: right;
   background: red;
}

#sidebar {
   position: absolute;
   width: 250px;
   height: 500px;
   background: lightgreen;
}

#banner {
   width: 730px;
   height: 150px;
   background: yellow;
}

#header {
   position: absolute;
   right: 0;
   width: 930px;
   height: 200px;
   background: orange;
   z-index: 1;
}

#header div.moduletable-headertext {
   width: 290px;
   height: 200px;
   float: right;
   background: white;
   color: black;
}

#contentarea {
   position: relative;
   top: 200px;
   width: 100%;
   clear: both;
   background: lightblue;
}

#rightside {
   width: 290px;
   height: 400px;
   float: right;
   background: purple;
 }
 
#maincontent {
   width: 440px;
   float: left;
   height: 450px;
   background: green;
}

#bottomcontent {
   width: 100%;
   border-bottom: 3px solid #b0b0b0;
   clear: both;
   background: darkred;
}

#bottomcontent div.line {
   width: 95%;
   height: 8px;
   margin: 0 auto;
   border-bottom: 1px solid black;
   clear: both; 
}

#bottomcontent .moduletable-bottomcontent {
   width: 95%;
   margin: 8px auto;
   height: 125px;
   background: yellow;
}

#footer {
   width: 100%;
   height: 150px;
   background: darkblue;
}
/****************************************************************
   TYPOGRAPHY
/****************************************************************/

   
/****************************************************************/
/*   CLASSES
/****************************************************************/
.clrboth { clear: both; }

**serandfae** · 10-03-2008, 09:49 PM

With everything you have positioned (which removes them from the document flow) clearing floats will not help you much. If you get rid of all the position: relative; stuff, use the document flow for those elements, and use positioning just for the elements you need to overlap you'll have it. Oh, and for that positioned element make the z-index more than 1. I'd go so far as to specify overflow: visible; as a rule for #header (I realize that's the default for overflow but I've never trusted IE to conform to certain defaults).

tim

**jim.thornton** · 10-03-2008, 11:12 PM

Thanks for your help Tim...

The problem was the positioning of absolute on #sidebar. I did that because I was having trouble with something else but I forgot to remove it. I changed it to float left and the header poped up over top of the sidebar.

Thank you for putting me on the right track.

FYI - I figured out the problem for the white background of the container.