wrapper not detecting content

saltedm8 · #1 Apr 6th, 2008, 21:37

i am not sure if the wrapper is detecting the child div's inside it, could someone check it out for me please

thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
<!--

  /*-------------------------------------------*/
  /*   layout ( non movers )  */
  /*-------------------------------------------*/
#banner_con {
    margin: 0 auto;
    width:962px;
    height:250px;
    margin-top: 10px;
    border:double #CCCCCC;
    background-color:
    
}

#banner {
    float:right;
    width:662px;
    height:195px;
    margin: 5px 5px 5px 0;
    background-color:#FFFFFF;
    background-image:url(images/bannor.JPG);
}

#navigation {
    float: left;
    width:280px;
    height:195px;
    margin: 5px 10px 5px 5px;
    background-color:#FFFFFF;
    background-image:url(images/nav.JPG);
}

#bar {
    float: left;
    width:942px;
    height:30px;
    padding: 7px 10px 5px 10px;
    background-image:url(images/bar.JPG);
}
#wrapper { 
    margin: 0 auto;
    width:962px;
    height:300px;
    margin-top: 5px;
    padding: 0 0 3px 0;
    background-color:#D3D0C7;
    border:double #CCCCCC;

}

#footer { 
    margin: 0 auto;
    width:942px;
    height:120px;
    margin-top:5px;
    margin-bottom:10px;
    padding: 5px 10px 5px 10px;
    background-color:#BB595A;
    border:double #CCCCCC;
    
}
  /*-------------------------------------------*/
  /*   layout ( movers )  */
  /*-------------------------------------------*/

#column_left {  
     float:left; 
     height:50px;
     width: 208px;
     background-color:#FFFFFF;
     margin: 10px 5px 5px 5px;
     padding: 3px 5px 3px 5px;
     border:double #CCCCCC;
}

#column_center_1{    
    width: 462px; 
    height:50px;
    float: left; 
    background-color:#FFFFFF;
    margin:10px 5px 5px 5px ;
    padding: 3px 5px 3px 5px;
    border:double #CCCCCC ;
    
}

#column_center_2{    
    width: 698px; 
    height:50px;
    float: left; 
    background-color:#FFFFFF;
    margin:10px 5px 5px 5px ;
    padding: 3px 5px 3px 5px;
    border:double #CCCCCC ;
    
}

#column_center_3{    
    width: 934px; 
    height:50px;
    float: left; 
    background-color:#FFFFFF;
    margin:10px 5px 5px 5px ; 
    padding: 3px 5px 3px 5px;
    border:double #CCCCCC ;
    
}

#column_center_4{    
    width: 698px;
    height:50px;
    float: left; 
    background-color:#FFFFFF;
    margin:10px 5px 5px 5px ;
    padding: 3px 5px 3px 5px;
    border:double #CCCCCC ;
    
}


#column_right{    
     float:right; 
     height:50px;
     width: 208px;
     background-color:#FFFFFF;
     margin: 10px 5px 5px 5px;
     padding: 3px 5px 3px 5px;
     border:double #CCCCCC ;
    
}

  /*-------------------------------------------*/
  /*   fonts and style  */
  /*-------------------------------------------*/

.breadcrumb { 
     font: Geneva, Arial, Helvetica, sans-serif;
     color: #333333;
     font-size:19px;
     letter-spacing:10px;
     font-variant:small-caps;
     font-weight:bold;
     
}

     
-->
</style>
</head>

<body>
<div id="banner_con">
<div id="navigation"></div>
<div id="banner"></div>
<div class="breadcrumb" id="bar">home-forums-next</div>
</div>
<div id="wrapper">
<div id="column_center_4"></div>
<div id="column_right"></div>
</div>
<div id="footer"></div>

</body>
</html>

p.s - the height attributes are only there temporally

dab42pat · #2 Apr 6th, 2008, 21:43

Looks ok to me.

saltedm8 · #3 Apr 6th, 2008, 21:51

thanks for looking

i am just worried that if i remove the height attributes its not doing to 'grow' inside the wrapper because its going to be part of a cms

dab42pat · #4 Apr 6th, 2008, 22:27

try changing your #wrapper to.

HTML: Select all

#wrapper { 
    margin: 0 auto;
    width:962px;
   overflow: auto;
    margin-top: 5px;
    padding: 0 0 3px 0;
    background-color:#D3D0C7;
    border:double #CCCCCC;

}

then your height attributes in column centre 4 and column right can be set to auto, that should allow the wrapper to expand as the inner divs expand.

saltedm8 · #5 Apr 6th, 2008, 22:31

fantastic, don't know why i did not think of that, thanks

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Wrapper problem	goldy	Web Page Design	2	May 30th, 2008 19:11
overhanging an imge in a wrapper div	lister110	Website Planning	1	Jan 13th, 2008 18:24
[SOLVED] CSS wrapper affecting body	Joolsd186	Web Page Design	7	Dec 31st, 2007 19:11
My navigation breaks my wrapper.	tigerslicer	Web Page Design	6	Sep 10th, 2007 10:58
Trying to align a div in a wrapper	AdRock	Web Page Design	7	Feb 22nd, 2007 16:03

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
wrapper not detecting content