Results 1 to 3 of 3

Thread: Wrapper height doesn't adjust!!!

  1. #1
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Wrapper height doesn't adjust!!!

    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;
    }

  2. #2
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    bump!

  3. #3
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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
  •