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:
Top comments (0)