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!!!!:mad:
Please help!
HTML
<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
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;
}
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!!!!:mad:
Please help!
HTML
<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
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;
}