Three columns, centered, fixed width, 100% height. It can't be that hard!

pedroponting

07-01-2011, 07:16 AM

All I want is to have my centered, fixed width wrapper div to be flanked by two full height columns so I can whack in a nice gradient as the edge of my wrapper. I want the central column to be 1000px wide and the flanking columns 100px wide and always 100% height. How hard can that be?

Naively, I imagined this would work:

#body {
height:100%;
}

#wrapper {
width:1200px;
margin:0 auto;
font-size:1em;
clear:both;
height: 100%;
}

#left {
height: 100%;
float: left;
width: 100px;
background-repeat:repeat-y;
background-image: url(Images/gradient-border-left.gif);
}

#center {
width: 1000px;
height:100%;
float: left;
}

#right {
width: 100px;
height:100%;
float: left;
background-repeat:repeat-y;
background-image: url(Images/gradient-border-right.gif);
}
<html>
<body>
<div id="wrapper">
<div id ="left>
</div>
<div id="center">
My content here.
</div>
<div id ="right">
</div>
</div>
</body>
</html>

But my left and right columns are invisible until I add some text or something to give them a height. I've googled this of course, and put in the 100% height on the parent container and body, but it has no effect at all.

Someone help please?

shankar.adodis

07-01-2011, 07:51 AM

Hello ,
make a border for each div you are using and then use float left property for left column and float right for right and provide width of wrapper="width of left column and width of right column"

pedroponting

07-01-2011, 09:20 AM

Thanks for the reply. I'm not sure though quite what you're suggesting. Why should a border matter? And the width of the wrapper has to be the combined width of all three divs, i.e., 1000+100+100 =1200px, which is what I have. Currently it all works, except that I have to provide a fixed height for my side column divs, I can't use "100%".