2 column layout that extends the length of the page as content is added to sidebar div

Question

I'm working on building a page with a 2 column layout, header, and footer. I'm using div's, html, and css.

The Problem I'm Experiencing is the left column that is created by div#sideBar extends over the footer when content is added.

The Solution I'm Looking For is I'd like the left column to 'push' the footer down and extend the length of the div#contentWrapper when more content is added to the div#sideBar.

I've looked through several tutorials, but I can't seem to figure it out. Can someone please direct me to a tutorial that will solve this problem or help me modify the code below so the page it creates will extend (push down footer) as content is added to the div#sideBar?

The ScreenShot below shows the result of the code below.

enter image description here

<style type="text/css">
#wrapper {
    width: 900px;
    margin: auto;
}
#header {
    background-color: #0F0;
}
#contentWrapper {
    background-color: #FF0;
}
#footer {
    background-color: #00F;
}
#sideBar {
    float: left;
    width: 200px;
    height: 100%;
    color: #F00;
}
#content {
    width: 700px;
    margin-left: 200px;
    background-color: #FFF;
}
p {
    margin: 0px;
}
</style>
</head>

<body>
<div id="wrapper">
  <div id="header">
    Home | Page One | Page Two  </div>
  <div id="contentWrapper">
    <div id="sideBar">
      <p>
        <ul>
  <li>Home</li>
  <li>Page One</li>
  <li> Page Two</li>
</ul>
      </p>
      <p>hgfds</p>
      <p>kgjkfhghf</p>
      <p>jkfhgjdffgfhj</p>
      <p>ljkfhgjdf</p>
      <p>;klgjhg</p>
      <p>lkgjhfg</p>
      <p>lgkjhfg</p>
      <p>&nbsp;</p>
    </div>
    <div id="content">
      <p>Content for  id "content" Goes Here</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
  </div>
  <div id="footer">
    <p>CopyRight 2014</p>
<p>Home | Page One | Page Two</p>
  </div>
</div>
</body>
</html>

score 0 · Answer 1 · answered Oct 08 '14 at 22:57

#footer {
    background-color: #00F;
    clear:both;
}

You need to clear the float used in the sideBar, which you can do in the footer.

#sideBar {
    float: left;
    width: 200px;
    height: 100%;
    color: #F00;
}

Unless you also need to expand the background of in which case you need to add a tag inside the wrapper that clears the floats

    </div> <!-- content div -->
    <div style="clear:left"></div>
  </div> <!-- wrapper div -->
  <div id="footer">

score 0 · Answer 2 · answered Oct 08 '14 at 22:57

Easiest way would be to use display:table; on a container that the sidebar and main content area both share and set the two child divs to display:table-cell;

HTML:

<div class="container">
    <div class="sidebar">
        <ul>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>

        </ul>
    </div>
    <div class="main">
        main content main content main content main content main content main content main content main content main content main content main content main content main content main content main
    </div>    
</div>

CSS:

.container {
    width:100%;
    display:table;
}
.sidebar, .main {
    width:50%;
    display:table-cell;
}
.main {
    background:#eee;
}
.sidebar {
    background:#666;
}

http://jsfiddle.net/3gbfnpua/3/

score -1 · Answer 3 · edited May 23 '17 at 11:49

You can solve this by adding this to your css:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Then add class="clearfix" to any element you want to extend.

There's a lot of information about Clearfix on StackOverflow (and elsewhere on the internet). Try this question, for example.

#wrapper {
  width: 900px;
  margin: auto;
}
#header {
  background-color: #0F0;
}
#contentWrapper {
  background-color: #FF0;
}
#footer {
  background-color: #00F;
}
#sideBar {
  float: left;
  width: 200px;
  height: 100%;
  color: #F00;
}
#content {
  width: 700px;
  margin-left: 200px;
  background-color: #FFF;
}
p {
  margin: 0px;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix {
  display: inline-block;
}
html[xmlns] .clearfix {
  display: block;
}
* html .clearfix {
  height: 1%;
}

<div id="wrapper">
  <div id="header">
    Home | Page One | Page Two</div>
  <div id="contentWrapper" class="clearfix">
    <div id="sideBar">
      <p>
        <ul>
          <li>Home</li>
          <li>Page One</li>
          <li>Page Two</li>
        </ul>
      </p>
      <p>hgfds</p>
      <p>kgjkfhghf</p>
      <p>jkfhgjdffgfhj</p>
      <p>ljkfhgjdf</p>
      <p>;klgjhg</p>
      <p>lkgjhfg</p>
      <p>lgkjhfg</p>
      <p>&nbsp;</p>
    </div>
    <div id="content">
      <p>Content for id "content" Goes Here</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
  </div>
  <div id="footer">
    <p>CopyRight 2014</p>
    <p>Home | Page One | Page Two</p>
  </div>
</div>

2 column layout that extends the length of the page as content is added to sidebar div

3 Answers3