NEWS | FREE BEAT | DJ MIX | OTHERS | SPORTS |



« | »

HOW TO DESIGN A BLOG – BLOG LAYOUT

Published by on March 16th, 2019.


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:

Blog NameTITLE HEADINGTitle description, Dec 7, 2017ImageSome text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
TITLE HEADINGTitle description, Sep 2, 2017ImageSome text..
Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
About MeImageSome text about me in culpa qui officia deserunt mollit anim..
Popular PostImage
Image
ImageFollow MeSome text..
Footer

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>
      <divclass=”fakeimg”>Image</div><br>
      <divclass=”fakeimg”>Image</div><br>
      <divclass=”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

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 ❯

TRENDING SONGS

Song BE SINCERE!! Apart From Sex – What Other Serious Thing Can Your Girlfriend Offer? Song PLEASE HELP!! What Can I Do To Stop Mastürbating? Song Dj Ozone Ft Thug Boi Ft Nicky young – Koko Song Mark Angel Comedy – POLICE OFFICER Part 6 (Episode 238) Song Broda Shaggi Comedy – Bathroom Fight Song Shantai – Grace Song Wale Turner x Olamide – Bosi Song Junior Boy Ft. Naira Marley – Money Song Heyteen – Jo Song Dtop X Fela 2 – Bata Wala

CLICK TO DROP YOUR COMMENT

Share this post with your friends on



0 Responses

Leave a Reply

NOTE:- Make your comment a bit long to get it approved.



Go Back To The Top

« | »


Looking for something? Search below