Simple? Backgrounds problem

Forum Moderators: not2easy

Message Too Old, No Replies

Simple? Backgrounds problem

Can't get it to stretch

eman

7:46 am on Jul 27, 2006 (gmt 0)

I hope this is an easy question, it seems like it would be a common issue and someone's bound to know what I'm doing wrong. So here we go.

I have 3 divs, header, main, and footer. The main is broken up into two divs, left and sidebar. Both Left and Sidebar have background colors.

If on a given page Left is longer than Sidebar, sidebar has whitespace below it, and vice versa if the sidebar is longer. I've tried everything I can think of to get both divs to stretch to the same length so that there's no whitespace underneath either one, but I can't figure out how.

If you need CSS, just let me know.

abbeyvet

8:07 am on Jul 27, 2006 (gmt 0)

Quick and dirty fix is to use a background image on the main div, with the colors you want, assuming your layout is fixed width.

dwighty

9:26 am on Jul 27, 2006 (gmt 0)

Hi Eman,

Not sure how you have exactly written your page but below is what I would do...

*********************HTML CODE************************
<div id="Main">
<div id="Left">

</div>
<div id="Sidebar">

</div>
<div class="clear"></div>
</div>

*********************CSS CODE*************************

#Main {
position: relative;
width: 800px; /* Set Width of Main Wrapper */
height: 700px; /* If you want to set an min or max height otherwise no need for this */
float: left;
background-color: #fff; /* Default background color for the Main Wrapper */
}

#Left {
position: relative;
display: inline;
float: left; /* Positions the Left Column ... left */
height: 100%; /* Set to 100% so background flows to bottom of wrapper */
width: 750px; /* Width of Left Column */
background-color: #fff; /* Background Color of Left Column */
}

#Sidebar {
display: inline;
float: right; /* Positions the sidebar to the right of your Left Column */
height: 100%; /* Set to 100% so background flows to bottom of wrapper */
width: 250px; /* Width of Sidebar */
background-color: #ddd; /* Background Color of Left Column */
}

Hope this helps.

Dwighty

eman

5:50 pm on Jul 27, 2006 (gmt 0)

abbyvet's fix seems like it will work, but if there's a 'real' fix, I'd like to find that one out, because I know this isn't the last of the sites I'll be coding like this one.

I applied dwighty's fix, but it didn't quite do it. So to help out I stripped out my pages and left just the bare bones to demonstrate what's happening.

**********CSS**********
html,body{
margin:0px;
padding:0px;
text-align:center; /*IE centering hack*/
}
.container{
text-align:left;/*compensate for IE Centering hack*/
width:800px;
margin:0 auto;
height:100%;
}

.main{
position:relative;
width:800px;
background:#FFFFFF;
}

.left{
position:relative;
display:inline;
float:left;
height:100%;
width:500px;
background:#CCCCCC;
}

.sidebar{
display:inline;
float:right;
height:100%;
width:300px;
background:#006699;
}

img{
display:block;/*IE spacing hack*/
}

.footer{
clear:both;
}

**************HTML********

<html>
<head>
</head>
<body>
<div class="container">
<div class="header">
HEADER IMAGE AREA
</div>
<div class="main">
<div class="left">
I need both divs to stretch to the size of the main div or the sidebar
div, whichever is longer. I applied dwighty's fix, but as you
can see it doesn't quite solve the problem, and on IE, it's even
worse.</div>
<div class="sidebar">
sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>sidebar<BR>
sidebar</div>
</div>
<div class="footer">
FOOTER AREA</div>
</div>
</body>
</html>

********END********

Thanks for the help.