mattpowers
05-30-2008, 03:52 PM
Hi, I've got a sort of weird centered layout, where I have 1 big container, and 3 columns floated-left, so I have unique backgrounds on each side of the center column. I'm also using a clear:both on the footer, and floating it as well, otherwise my content borders cut into my footer... I used Dave Shea's min-height hack on my content area, but in Firefox, when I add content, it doesn't push the footer down, and the content looks overflowed (no background color).
NOTE: It looks fine in I.E. 7, + Opera 9.2
You can see the live demo here:
Demo Site (http://www.base27.com/brg/index.html)
And the CSS:
CSS (http://www.base27.com/brg/style.css)
HTML:
<body>
<div id="container">
<div id="leftCol" class="float-left"></div>
<div id="centerCol" class="float-left">
<div id="nav"></div>
<div id="content-top"></div>
<div id="content">
<div id="main">
<h3>Header</h3>
<p>Sed orci. Pellentesque</p>
<div class="imageholder"><img src="images/test1.gif" height="183"></div>
<div class="imageholder"><img src="images/test2.gif"></div>
<br class="clearboth">
</div>
</div>
</div>
<div id="rightCol" class="float-left"></div>
<div id="footer" class="clearboth float-left"></div>
</div>
</body>
CSS:
div, ul, li, h3, img {
padding: 0;
margin: 0;
border: 0;
}
body{
margin: 0 auto;
padding: 0;
text-align: center;
background: #104b89;
}
.float-left{
float: left;
}
.clearboth{
clear: both;
}
.hide{
display: none;
}
#container{
margin: 0 auto;
width: 1081px;
}
#leftCol{
width: 94px;
height: 488px;
background: url(images/left-col.gif) top left no-repeat;
}
#centerCol{
width: 911px;
height: 488px;
background: #f3f3f3 url(images/header.gif) top left no-repeat;
text-align: left;
}
#rightCol{
width: 76px;
height: 488px;
background: url(images/right-col.gif) top left no-repeat;
}
#nav{
height: 30px;
background: #5380bc;
width: 907px;
*width: 911px;
border-right: 2px solid #78a3d6;
border-left: 2px solid #78a3d6;
margin-top: 134px;
}
#content-top{
height:46px;
width: 911px;
background: url(images/content-top.gif) top left no-repeat;
}
#content{
width: 771px;
*width: 911px;
border-right: 2px solid #78a3d6;
border-left: 2px solid #78a3d6;
padding: 0 68px 1px 68px; /*margin for main content + Opera collapse fix*/
}
/* for Mozilla/Safari/Opera */
*>#content {
padding-top: 278px;
min-height: 20px;
}
*>#main {
margin-top: -278px;
}
/* for IE, with IE5/Mac backslash filter \*/
* html #content {
height: 278px;
}
/* end filter */
#main h3{
font-family: Arial, Helvetica, Verdana, sans-serif;
padding-bottom: 16px;
border-bottom: 1px solid #6699cc;
margin-bottom: 16px;
color: #104b89;
font-weight: normal;
font-size: 1.6em;
letter-spacing: 0.1em;
}
#main p{
color: #333;
line-height: 20px;
font-size: 12px;
letter-spacing: 0.05em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.imageholder {
width: 243px;
float: left;
margin-top:20px;
}
#footer{
height:292px;
width: 1081px;
background: url(images/footer.gif) bottom left no-repeat;
}
Sorry for such a massive post, I wasn't entirely sure what format you guys like to look at things in :)
Thanks in advance, and have an awesome day.
-Matt
NOTE: It looks fine in I.E. 7, + Opera 9.2
You can see the live demo here:
Demo Site (http://www.base27.com/brg/index.html)
And the CSS:
CSS (http://www.base27.com/brg/style.css)
HTML:
<body>
<div id="container">
<div id="leftCol" class="float-left"></div>
<div id="centerCol" class="float-left">
<div id="nav"></div>
<div id="content-top"></div>
<div id="content">
<div id="main">
<h3>Header</h3>
<p>Sed orci. Pellentesque</p>
<div class="imageholder"><img src="images/test1.gif" height="183"></div>
<div class="imageholder"><img src="images/test2.gif"></div>
<br class="clearboth">
</div>
</div>
</div>
<div id="rightCol" class="float-left"></div>
<div id="footer" class="clearboth float-left"></div>
</div>
</body>
CSS:
div, ul, li, h3, img {
padding: 0;
margin: 0;
border: 0;
}
body{
margin: 0 auto;
padding: 0;
text-align: center;
background: #104b89;
}
.float-left{
float: left;
}
.clearboth{
clear: both;
}
.hide{
display: none;
}
#container{
margin: 0 auto;
width: 1081px;
}
#leftCol{
width: 94px;
height: 488px;
background: url(images/left-col.gif) top left no-repeat;
}
#centerCol{
width: 911px;
height: 488px;
background: #f3f3f3 url(images/header.gif) top left no-repeat;
text-align: left;
}
#rightCol{
width: 76px;
height: 488px;
background: url(images/right-col.gif) top left no-repeat;
}
#nav{
height: 30px;
background: #5380bc;
width: 907px;
*width: 911px;
border-right: 2px solid #78a3d6;
border-left: 2px solid #78a3d6;
margin-top: 134px;
}
#content-top{
height:46px;
width: 911px;
background: url(images/content-top.gif) top left no-repeat;
}
#content{
width: 771px;
*width: 911px;
border-right: 2px solid #78a3d6;
border-left: 2px solid #78a3d6;
padding: 0 68px 1px 68px; /*margin for main content + Opera collapse fix*/
}
/* for Mozilla/Safari/Opera */
*>#content {
padding-top: 278px;
min-height: 20px;
}
*>#main {
margin-top: -278px;
}
/* for IE, with IE5/Mac backslash filter \*/
* html #content {
height: 278px;
}
/* end filter */
#main h3{
font-family: Arial, Helvetica, Verdana, sans-serif;
padding-bottom: 16px;
border-bottom: 1px solid #6699cc;
margin-bottom: 16px;
color: #104b89;
font-weight: normal;
font-size: 1.6em;
letter-spacing: 0.1em;
}
#main p{
color: #333;
line-height: 20px;
font-size: 12px;
letter-spacing: 0.05em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.imageholder {
width: 243px;
float: left;
margin-top:20px;
}
#footer{
height:292px;
width: 1081px;
background: url(images/footer.gif) bottom left no-repeat;
}
Sorry for such a massive post, I wasn't entirely sure what format you guys like to look at things in :)
Thanks in advance, and have an awesome day.
-Matt