Surrounding Div not expanding

**barney0o0** · Jan 16, 2008 04:07

Hi Folks....something is wrong and it must be so simple, but i cant figure it out. I cant get the divs to expand the outside div of 'main' (dotted green border)

The page with its css can be seen here

Notes:
The 'contents' div is used just to push down the footer.
'Main' div contains a background image that i want to show (at the moment its green). When the contents of the 'flashhead' are populated, this box should expand and also expand the 'main' div....but for some reason it doesnt work.

css:

Code:

 html, body, div.contents {
	min-height: 100%;
	width: 100%;
	height: 100%;
	margin: 0;   /* margin keeps Mozilla 1* from adding scrollbars */
 }

 /*
  * The "height" above is a hack for IE5+/Win.  Below we adjust
  * it using the child selector to hide from IE5+/Win
  */

 html>body, html>body div.contents {
	height: auto;
 }

 div.main {
	margin-bottom: 109px;
	height: auto;
	padding-left: 0.5em;
	padding-right: 0.5em;
	background-image: url(../sitefiles/topright.gif);
	background-repeat: no-repeat;
	background-position: right top;
 }

#flashhead2{
	padding-top: 5px;
	padding-bottom: 10px;
	width: 855px;
	border: medium dotted #00FF00;
	z-index: auto;
	height: auto;	
}

#sidenav
{
	float:left;
	width:208px;
	background-color: #333333;
	margin-left: 0px;
	margin-right: 10px;
	padding-left: 1px;
	padding-top: 20px;
	background-image: url(../sitefiles/subnavtop.gif);
	background-repeat: repeat-x;
	height: auto;
	position: relative;
	z-index: auto;
}

#mainbody{
	height: auto;
	width: auto;
	float: left;	
}
#mainbody_s{
	width: 423px;
	border: thin dotted #FFCC00;
	background-color: #00FFFF;
	float: left;
	margin-right: 10px;
	}

#subsection{
	float:left;
	width:190px;
	border: thin solid #009900;
	height: auto;
}

...and the html

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/main2.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="contents">
<div class="main">
<div id="flashhead2">
<div id="sidenav">side nav position</div>
<div id="mainbody">just to hold both mainsection and subsection
<div id="mainbody_s">e omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea com</div><!-- this closes mainbody_s -->
<div id="subsection">right side content"</div><!-- this closes subsection -->

</div><!-- this closes mainbody -->
</div><!-- this closes flashhead2 -->
</div><!-- this closes main -->
</div><!-- this closes contents -->



</body>
</html>

Many thanks in advance

**Centauri** · Jan 16, 2008 04:42

Have a read of Paul's sticky thread "CSS FAQ" at the top of this forum, especially the part about "clearing floats" - an element is not required to enclose floated content unless those floats are "cleared".

**barney0o0** · Jan 16, 2008 05:05

Cheers Centauri (and of course Paul)

Ive used clears before, but never really understood why!(copying from a book, didnt get the message through)

Got it working..., just put

Code:

.clearer {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px; 
}

<div class="clearer"></div>

..into the mix

thanks again

User Tag List

Thread: Surrounding Div not expanding

Thread Tools

Display

Surrounding Div not expanding

Bookmarks

Bookmarks

Posting Permissions