How To Create A Blog Layout - W3Schools

How TO - Blog Layout ❮ Previous Next ❯

Learn how to create a responsive blog layout with CSS.

Learn how to create a responsive blog layout that varies between two and full-width columns depending on screen width.

Resize the browser window to see the responsive effect:

Try it Yourself »

How To Create a Blog Layout

Step 1) Add HTML:

Example

<div class="header"> <h2>Blog Name</h2></div><div class="row"> <div class="leftcolumn"> <div class="card"> <h2>TITLE HEADING</h2> <h5>Title description, Dec 7, 2017</h5> <div class="fakeimg" style="height:200px;">Image</div> <p>Some text..</p> </div> <div class="card"> <h2>TITLE HEADING</h2> <h5>Title description, Sep 2, 2017</h5> <div class="fakeimg" style="height:200px;">Image</div> <p>Some text..</p> </div> </div> <div class="rightcolumn"> <div class="card"> <h2>About Me</h2> <div class="fakeimg" style="height:100px;">Image</div> <p>Some text about me in culpa qui officia deserunt mollit anim..</p> </div> <div class="card"> <h3>Popular Post</h3> <div class="fakeimg">Image</div><br> <div class="fakeimg">Image</div><br> <div class="fakeimg">Image</div> </div> <div class="card"> <h3>Follow Me</h3> <p>Some text..</p> </div> </div></div><div class="footer"> <h2>Footer</h2> </div>

Step 2) Add CSS:

Example

* { box-sizing: border-box;}body { font-family: Arial; padding: 20px; background: #f1f1f1;} /* Header/Blog Title */.header { padding: 30px; font-size: 40px; text-align: center; background: white; }/* Create two unequal columns that floats next to each other *//* Left column */.leftcolumn { float: left; width: 75%;}/* Right column */.rightcolumn { float: left; width: 25%; padding-left: 20px;}/* Fake image */.fakeimg { background-color: #aaa; width: 100%; padding: 20px;}/* Add a card effect for articles */.card { background-color: white; padding: 20px; margin-top: 20px;}/* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both;}/* Footer */.footer { padding: 20px; text-align: center; background: #ddd; margin-top: 20px;}/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */@media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; }} Try it Yourself »

Tip: Go to our CSS Website Layout Tutorial to learn more about website layouts.

Tip: Go to our CSS Responsive Web Design Tutorial to learn more about responsive web design and grids.

❮ Previous Next ❯ ★ +1 W3schools Pathfinder Track your progress - it's free! Log in Sign Up