CODEWITHSUNDEEP
css
Sam
Sam

Reputation: 313

How to make three columns all the full height of the page?

I have a page set up with 3 columns: a main content div, and a shadow/border on either side.

Example here: http://jsfiddle.net/rfPJC/

I need the "shadow" divs on either side to go to the bottom of the page. How can I do this?

Example HTML

 <div id="wrapper">
        <div id="left"></div>
        <div id="main">
            <div id="content"></div>
        </div>
        <div id="right"></div>  
    </div>

Example CSS

html, body {height: 100%;}
#wrapper {height: 100%;}
#left {background: #555; width: 30px; height: 100%; float: left;}
#main {background: #999; width: 300px; float: left;}
#content {height: 2000px;}
#right {background: #555; width: 30px; height: 100%; float: left;}

Upvotes: 1

Views: 132

Answers (2)

Webb
Webb

Reputation: 166

I give the sides a container... like this:

<html>
<body>
    <div id="wrapper">
        <div id="sides_container">
            <div id="left">Left Banner</div>
            <div id="right">Right Banner</div> 
            <div id="main">
                <div id="content">Hello</div>
            </div>

        </div>
    </div>
</body>

Then CSS like this:

html, body {height: 100%}
#wrapper {height: 100%}
#sides_container{width:360px; margin-left:auto; margin-right:auto; background:#555;}
#left {background: #555; width: 30px; height: 100%; float: left}
#main {background: #999; width: 300px; margin-right:auto; margin-left:auto;}
#content {height: 2000px}
#right {background: #555; width: 30px; height: 100%; float: right;}

I like centered as well, sorry... http://jsfiddle.net/uhJHF/

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191779

If the "shadow" divs have position: fixed, they will stay at 100% height. However, this can obscure part of the content, and the right-shadow will align to the left. To fix this, make the left value of the right div equal to the width of both divs combined, and add a left margin to the main div.

http://jsfiddle.net/rfPJC/

Upvotes: 1

Related Questions