CSS Layout

Introduction

Today is day 4 of my 30 Days of CSS, and I've been learning about CSS layouts using "float". This seems like a good start to me and should form a good foundation that I can expand upon and learn CSS Grid and Flexbox in the coming days. You can follow my progress on Twitter @cloudblogaas

Today's Problem

To challenge myself, I've decided that I should try and made a basic two column blog layout using CSS.

The Solution

The first step to developing this layout, is to add a wrapper class so that I can place the blog in the center of the page. This is done using the following CSS which sets the width of the wrapper to 80% of the page width and centers it automatically.

.wrapper {
  max-width: 80%;
  margin: auto;
}

To implement the columns within the wrapper, I've basically created 2 classes:

.mainColumn {
  float: left;
  width:75%;
  background: red;
}
.sidebar {
  float: right;
  width: 25%;
  background: yellow;
}

The .mainColumn class is defined as 75% of the width of its container and is floated to the left. The .sidebar container is 25% of the container and is floated to the right.

I've then added a bit of styling to add a margin and separate the layout slightly.

.panel {
  margin: 10px;
  background: white;
}

.mainColumn p, .mainColumn h1 {
  margin: 10px;
  line-height: 1.5;
  background: white;
}

The HTML for the page is basically a few divs to give me the wrapper and columns that I want.

<div class="wrapper">
  <h1>Minimal Blog Page Layout</h1>
  <div class="mainColumn">
    <h1>Heading</h1>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    </div>
  <div class="sidebar">
  <div class="panel">
    <h2>Heading</h2>
    <p>...</p>
  </div>
      <div class="panel">
    <h2>Heading</h2>
    <p>...</p>
  </div>
      <div class="panel">
    <h2>Heading</h2>
    <p>...</p>
  </div>
</div>

And that's it. The main work here is the div's that float:left and float:right.

You can see a working version of the page on my CodePen:

Resources

I've been following a series on YouTube by The Net Ninja on CSS Positioning: