DEV Community

Cover image for CSS Layout
Davey
Davey

Posted on • Edited on • Originally published at dave-s.Medium

4

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more