SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Surrounding Div not expanding

    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

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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".

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •