ePrivacy and GPDR Cookie Consent by Cookie ConsentCSS Layout - Doobries Domain

CSS Layout

— 5 minute read

Introduction permalink

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 permalink

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

The Solution permalink

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>
</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:

See the Pen Minimal Blog Page Layout by davey (@cloudblogaas) on CodePen.

Resources permalink

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

Credits permalink

Photo by Mike Lewis HeadSmart Media on Unsplash