0

I am having trouble getting my columns to extend to the bottom of the body element. Here is the CSS so far:

body {
    margin: 0 auto;
    padding: 0;
    width:90%;
    background: #a7a09a;
}

.header {
    padding: 5px 10px;
    background-color: #DDDDDD;
}

.navmenu {
    background-color: #CC9998;
}

.navmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: 0;
}

.navmenu li {
    display: inline;
    margin: 0;
    padding: 5px 10px;
}

.column1 {
    width: 70%;
    height: 100%;
    float: left;
    background-color: #9ACC99;
}

.column2 {
  width: 30%;
  height: 100%;
  float: right;
  background-color: #9999CD;
}
.footer {
    clear: left;
}

h1 {
    margin: 0;
}

h2 {
    padding: 5px;
}

p {
    padding: 10px;
}

The first column extends past the second one. I know it has something to do with them being float elements and I read about using the clear attribute but I've tried fooling around with left, right, both, none on the Footer div and the second column still doesn't extend. What is the best way to edit my CSS to make this happen?

<body>
    <div class="header">
        <h1>Simple 2 column CSS layout, final layout</h1>
    </div>
    <div class="navmenu">
        <ul>
        </ul>
    </div>
    <div class="column1">
        <h2>Column </h2>
        <p> <a href="#">Text</a>
            <br>
            <br>
            <a href="#">Simple 2 column CSS layout</a>
        </p>
            <ul>
            </ul>
    </div>
    <div class="footer">
    </div>
  </body>
MCHLWRRN
  • 33
  • 6

1 Answers1

0

Currently there is no height for the columns to adjust themselves 100% .

One method to allow elements to inherit the height of the viewport is to add html,body { height: 100%; } to allow the percentage heights, and remove the margin on body.

Relevant question - Make body have 100% of the browser height

You haven't provided your HTML, so example 1 is based on your CSS. Depending on your needs, you may need to modify the columns height to account for the height of the header and footer.

Both examples are centered with a max-width and margin: 0 auto. The background is provided by the background color on html.

Example 1

html {
 background: #333; 
}
html,body {
  height: 100%;
  margin: 0;
}

body {
  max-width: 500px;
  margin: 0 auto;
}

.column1 {
  width: 70%;
  height: 100%;
  float: left;
  background-color: #9ACC99;
}
.column2 {
  width: 30%;
  height: 100%;
  background-color: #9999CD;
  float: left;
}
<div class="column1">
</div>

<div class="column2">
</div>

Example 2

This example is made using display: table and display: table-cell. The header and footer are standard block elements and the height is shared between the elements adding up to 100%.

html {
 background: #333; 
}

html,body {
  height: 100%;
  margin: 0;
}
header {
  height: 20%;
  background: #e91e63;
  max-width: 500px;
  margin: 0 auto;
}
.wrap {
  display: table;
  height: 70%;
  width: 100%;
  margin: 0 auto;
  max-width: 500px
}
.column1 {
  width: 70%;
  display: table-cell;
  background-color: #9ACC99;
}
.column2 {
  width: 30%;
  display: table-cell;
  background-color: #9999CD;
}
footer {
  height: 10%;
  background: #f8bbd0;
  max-width: 500px;
  margin: 0 auto;
}
<header></header>
<div class="wrap">
    <div class="column1"></div>
    <div class="column2"></div>
</div>
<footer></footer>
Community
  • 1
  • 1
misterManSam
  • 24,303
  • 11
  • 69
  • 89
  • This accomplished extended to columns to the bottom of the body element, but now the container seems left-aligned. I am trying to have the two columns centered within the body element with some padding / margin on both the left and right side with the neutral gray background color. Pretty new to CSS. (Thanks for helping with the initial issue!) – MCHLWRRN Oct 06 '14 at 05:27
  • We can give the main blocks a max-width and center them with `margin: 0 auto`. [Like this example](http://jsbin.com/gefoyi/2/edit). Look good? Or you could give them a fixed pixel width, if you don't want them to resize. – misterManSam Oct 06 '14 at 05:30
  • @user3740964 - I have updated both examples so they are centered. They are using max-width so they are fluid, but if you wanted a fixed width you could give them a `width: size px;` – misterManSam Oct 06 '14 at 05:42