CODEWITHSUNDEEP
htmlcss
Max Young
Max Young

Reputation: 1662

Equal columns CSS

I am trying to get my columns to both reach the bottom of the page. The right column is much longer then the left column but when I set the height to 100% for both of them it doesn't cover the entire page.

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Primarch - Roboute Guilliman</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="stylesheet.css">
    </head>

    <body>
        <div id="wrapper">
            <div id="header">
                 <h1>Roboute Guilliman</h1>

                <div id="breadcrumb"><a href="index.html">Home</a> > <a href="index.html">Primarchs</a> > <a href="index.html">Roboute Guilliman</a>

                </div>
            </div>
            <div id="leftcolumn">   <a href="index.html">Home</a>
 <a href="#About">About</a>
 <a href="#Early_Years">Early Years</a>

            </div>
            <div id="rightcolumn">
                <div class="content"></div>
            </div>
        </div>
    </body>
</html>

CSS:

html, body {
    font-family:Verdana, Arial, sans-serif;
    background-image: url(data-slate.jpg);
    background-repeat: repeat;
    color: #00CC00;
    width:100%;
    height:100%;
}
a {
    color: #FFFF00;
}
.ImageBorder {
    border: #00CC00 2px solid;
}
#wrapper {
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    margin:0 auto;
}
#leftcolumn {
    float: left;
    width: 165px;
    height:100%;
    position:relative;
    border: #00CC00 3px solid;
    padding-top: 30px;
}
#rightcolumn {
    position:absolute;
    height:100%;
    left: 170px;
    right:0px;
    top:125px;
    border: #00CC00 3px solid;
    padding:15px;
}
#header {
    padding: 10px;
    text-align:center;
    border: #00CC00 3px solid;
}
.content {
    padding: 20px 20px -10px 20px;
}
#floatright {
    margin: 10px;
    float: right;
}
#footer {
    font-size:70%;
    position:relative;
    left:30%;
    bottom:0px;
}
#leftcolumn a {
    margin: 30px;
}
#breadcrumb {
    text-align: left;
}

Here is the html with full text http://jsfiddle.net/bNhng/1/ about half way down the page my borders end and the text keeps going.

Upvotes: 0

Views: 126

Answers (2)

coopersita
coopersita

Reputation: 5041

Here's a post with several ways of achieving what you want: http://css-tricks.com/fluid-width-equal-height-columns

But the easiest way is to just do faux columns: http://www.alistapart.com/articles/fauxcolumns/

Upvotes: 1

pckill
pckill

Reputation: 3759

Giving your colomns height 100% would just say that their height is 100% of their parents height, which is #wrapper that has a height of 100% of the body. And since your colomns do not start from the top, they do not fit in the window.

Here is a fiddle of your code: http://jsfiddle.net/bNhng/ . I modified it to make both columns same height by removing position:absolute; and top:125px; from #rightcolumn class.

Upvotes: 0

Related Questions