Two Column Div Layout (with a left nav)

My first website was built in the 90s as a Starcraft fan site. Like most 15-year old’s websites, it didn’t go anywhere. I remember building the entire layout using HTML tables though.

The world has changed since then, and I still struggle to remember exactly what I need to do in order to build a basic, two-column layout. I gut tells me to go back to tables. The rest of the world says to use divs. So, here is how you do it with divs. This is very rough and probably doesn’t work in all browsers. I’m mainly putting this in here for my benefit.

The three main components you need here are:

  • A container div that holds the two columns
  • A left column
  • A right column

Here is some example code:

<div id="container">
  <div id="leftColumn">Here is some content</div>
  <div id="rightColumn">Here is more content</div>
</div>

The styles that make this work look like this:

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

div#container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

div#leftColumn {
  float: left;
  width: 300px;
  background-color: #000000;
  height: 100%;
  overflow-y: scroll;
}

div#rightColumn {
  margin-left: 300px;
  background-color: #ff0000
}

The key things to know are:

  • float: left on the leftContainer makes that div hug the left side.
  • Setting the width of the leftContainer determines how wide your left column will be.
  • If you don’t set a margin-left inside of your rightColumn, the rightColumn div’s background will actually extend behind the leftColumn div.
  • overflow-y: scroll in the leftColumn div makes it so that the left column has a scroll bar. You must also have height set to 100% in that div for it to work.

Sources
http://mirificampress.com/show.php?id=106
http://stackoverflow.com/questions/4345285/adding-a-scroll-bar-if-div-extends-below-bottom-of-view-port

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s