Wrapper height doesn't adjust!!!

**Concept** · 12-12-2007, 04:26 PM

Hi folks,

I have a dilemma with a wrapper div that I'm using to centre align content.
This wrapper has 3 standard columns (divs) and the centre column is used for content which varies in height from page to page. The problem is that the wrapper div's height does not adjust when the content height exceeds that of the wrapper. This happens in Firefox, Opera and Safari...IE adjusts.......I know I have probably over looked something but it's driving me mental!!!!

Please help!

HTML

Code:

<body>
  <div id="center">
    <div id="wrapper">
      <div id="header">
        <div id="banner"></div>
        <div id="ad"></div>
      </div>

      <div id="content">
	<div id="left"></div>
      
      
        <div id="middle">
	  <div class="box">
            <h2>Mini-Heading</h2>
	    <p>Content text</p>
	  </div>
          <div class="box">
	    <h2>Fixtures</h2>
	    <p></p>
	    <p></p>
	  </div>
        </div>
        <div id="right"></div>
      </div>    <!-- end content-->
    </div> <!-- end wrapper -->
  </div> <!-- end centre -->

CSS

Code:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;  
	background-image: url(../images/bg.gif);
	background-attachment:fixed;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

#center {
	width: 100%;
	text-align: center;
	padding-top: 10px;
}

#wrapper {
	width: 850px;
	text-align: left;
	#height: 100%;
	min-height:900px;
	margin: 0 auto;/* Centres the diplay in browsers other than IE*/
	
}

#header {
	width: 850px;
	height: 140px;
	background-color: #314396;
	margin: 0;
	padding: 0;
	text-align: left;
}

#banner{
	background-image: url(../images/banner.gif);
	/*background-color: #314396; */
	background-repeat: no-repeat;
	width: 550px;
	height: 140px;
	float: left;
	background-position: 0 20px;
	color: white;
}

#ad{
	background: url(../images/gt-logo.png) right 0 no-repeat;
	width: 300px;
	height: 140px;
	float: left;
	color: white;	
}

#content {
	width: 850px;
	height: 100%;
	min-height: 950px;
	text-align: left;
	background: #fff;
	margin: 1px 0 0 0;
}

#left{
	width: 122px;
	float: left;
	margin: 5px;
}

#middle{
	width: 550px;
	float: left;
	margin: 5px 5px 5px 0;
	height: 100%;
	padding: 2px 2px 2px 2px;
	
}

#right{
	width: 152px;
	height: 100%;
	border: solid #ffffff 1px;
	margin: 5px 5px 0 0;
	float: left;
	text-align: center;
	background-color: #314396;
}

**Concept** · 12-13-2007, 09:51 AM

bump!

**Concept** · 12-13-2007, 10:19 AM

Problem solved http://www.positioniseverything.net/...ut/equalheight

Thread: Wrapper height doesn't adjust!!!

Thread Tools

Search Thread

Wrapper height doesn't adjust!!!

Bookmarks

Bookmarks

Posting Permissions