Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    No hair!! Simple Box Model

    Ok, I stripped every bit of code from my web page to bring it to the basics. Although at the basics I still do not see what the problem is. What am I missing here?

    I have put a border on all div tags for clarity. Below is a picture of what my browser is showing.

    Issue: My yellow and red div will not wrap around the pink and green div.
    In short, I am trying to put 2 wrappers around two div tags.


    Any help on this simple box issue would be much appreciated while I still have a few strands of hair left.

    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>
    <title>Educational Site</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
    <style type="text/css">
    body {
      	font: 90%/1 arial, helvetica, sans-serif;
    	background:#333;
      	line-height: 130%;
      	width: 100%;
      	min-width: 970px;
    }
    /******WRAPPERl ******/
    #wrapper {
      	width: 960px;/* The width of the background image needs to be 906px */
    	margin: 0 auto;/* center the page in Firefox */
      	text-align: left;
    	position: relative;
    	z-index: 2;
    	border: 4px solid yellow
    }
    /***** CONTENT WRAPPER *****/
    #contentwrapper {
    	height:4px;
    	border:5px solid red;
    }
    /******CONTENT ******/
    #content {
    	float: left;
    	width: 70%; /*635*/
    	border: 4px solid pink;
    	background:#999;
    }
    /***** SIDEBAR *****/
    #sidebar {
    	float: left;
    	width: 15%; /*255*/
    	background: #E1E0EF;
    	border: 4px solid green;
    }
    </style>
    </head>
    <body>
    
      <div id="wrapper">
    	<div id="contentwrapper">
    		<div id="content">
    		  	<h1>asdfasdfasdf</h1>
    		  	<h1>asdfasdfasdf</h1>
    		  	<h1>asdfasdfasdf</h1>
    		  	<h1><!--content ENd-->   </h1>
    		</div>
         
         	<div id="sidebar">
          		 <h2>asdfasdfasdf</h2>
    		 	<h2>asdfasdfa</h2>
    	 		<h2>asdfasdf</h2>
    	 		<h2><!--sidebar END--></h2>
         	</div>
         </div> <!--contentwrapper END-->
      </div> <!--wrapper END-->
    
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails No hair!! Simple Box Model-code_error.jpg  

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Funny i've just been discussing this problem in another topic see here: http://codingforums.com/showthread.php?t=197440

    Basically you need to add overflow:auto; to your wrapper so that it encloses it's floats!

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Scriptet: Almost!

    I haven't dealt with this issue before or for that matter seen this solution. Good stuff

    Ok, if I put the overflow:auto into the #wrapper (yellow box) it does as you say. It expands out including the pink and green boxs as I want.

    Problem--The contentwrapper(red box) does not expand with it. If I put the overflow:auto into the contentwrapper id then the whole thing collapes.

    Any idea on how to include the red box in the epansion?

    Thanks for the rely and help.
    Chuck
    p.s Off to read addtional links.
    Last edited by cc4digital; 06-03-2010 at 11:01 PM. Reason: ps

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You set a height of 4px on contentwrapper. Lose the height. You actually want overflow:auto; on contentwrapper, not wrapper. Do a search for "how to clear floats".

    http://www.quirksmode.org/css/clearing.html
    Last edited by _Aerospace_Eng_; 06-03-2010 at 11:06 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Aero is right...

    Think of it this way when children are floated it's as though it's parent doesn't know its there...

    So you are floating things inside contentwrapper, but contentwrapper doesn't see them hence it has no height as though nothing is inside it..

    However if you add overflow:auto; then it will see the floats and expand to contain them..as a result the overall container will see the height of contentwrapper and also expand without overflow because contentwrapper is not floated.

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You set a height of 4px on contentwrapper. Lose the height. You actually want overflow:auto; on contentwrapper, not wrapper.
    Ya, that was stupid with the height. But I still have the same problem. Here is the new code that I am using.

    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>
    <title>Educational Site</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
    <style type="text/css">
    body {
      	font: 90%/1 arial, helvetica, sans-serif;
    	background:#333;
      	line-height: 130%;
      	width: 100%;
      	min-width: 970px;
    }
    /******WRAPPERl ******/
    #wrapper {
      	width: 960px;/* The width of the background image needs to be 906px */
    	margin: 0 auto;/* center the page in Firefox */
      	text-align: left;
    	position: relative;
    	z-index: 2;
    	border: 4px solid yellow;
    }
    /***** CONTENT WRAPPER *****/
    #contentwrapper {
    	border:5px solid red;
    	autoflow:auto;
    }
    /******CONTENT ******/
    #content {
    	float: left;
    	width: 70%; /*635*/
    	border: 4px solid pink;
    	background:#999;
    	
    	
    }
    /***** SIDEBAR *****/
    #sidebar {
    	float: left;
    	width: 15%; /*255*/
    	background: #E1E0EF;
    	border: 4px solid green;
    }
    </style>
    </head>
    <body>
    
      <div id="wrapper">
    	<div id="contentwrapper">
    		<div id="content">
    		  	<h1>asdfasdfasdf</h1>
    		  	<h1>asdfasdfasdf</h1>
    		  	<h1>asdfasdfasdf</h1>
    		  	<h1><!--content ENd-->   </h1>
    		</div>
         
         	<div id="sidebar">
          		 <h2>asdfasdfasdf</h2>
    		 	<h2>asdfasdfa</h2>
    	 		<h2>asdfasdf</h2>
    	 		<h2><!--sidebar END--></h2>
         	</div>
    		
         </div> <!--contentwrapper END-->
      </div> <!--wrapper END-->
    
    </body>
    </html>

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You have autoflow, not overflow.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I GOT IT

    Ya, overflow. STUPID STUPID STUPID


    THANKS THANKS THANKS
    Last edited by cc4digital; 06-03-2010 at 11:41 PM.

  • #9
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Any hair left?

  • #10
    New Coder
    Join Date
    Oct 2009
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ya, but I no longer need a brush.

    Thanks again for all your help. I would not have figured that one out.

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    There is a lot of help here.

    Frank

    Use the Search facility.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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