Blog Layout

by Petra1999

HTML

<div class="topbar">
  <div class="left">top left</div>
  <div class="right">top right</div>
</div>
<div class="bottombar">
  <div class="left">bottom left</div>
  <div class="right">bottom right</div>
</div>

<div class="leftbar">sidebar</div>
<div class="rightbar">rightbar</div>

<div class="wrapper">

  <div class="posts">
    <div class="post">post</div>
    <div class="post">post</div>
    <div class="post">post</div>
  </div>

  <div class="pagination">pagination</div>

</div>

<br>
<ul>
  <li>made by <a href="http://cloudythms.tumblr.com/">cloudythms</a></li>
</ul><br>

CSS

.topbar,
.bottombar {
  position: fixed;
  width: 100%;
  left: 0;
  z-index:99;
}

.topbar {
  top: 0;
}

.bottombar {
  bottom: 0;
}

.left, .right {
  width:50%;
  height:100%;
  border:1px solid black;
  box-sizing: border-box;
}

.left {
  float:left;
}

.right {
  float:right;
}

/* - */

.leftbar,
.rightbar {
  position: fixed;
  box-sizing: border-box;
  width: 80px;
  top: 123px;
  padding: 10px;
}

.leftbar {
  left: calc(50% - 350px/2 - 80px - 10px);
}

.rightbar {
  left: calc(50% + 350px/2 + 10px);
}

/* - */

.wrapper {
  width: 350px;
  margin: 0 auto;
  margin-top: 123px;
}

.posts {
  box-sizing: border-box;
}

.post {
  box-sizing: content-box;
  width: 300px;
  margin: 0 auto;
  margin-bottom: 25px;
}

.post:last-child {
  margin-bottom:0;
}

.pagination {
  
}




/* ------- ignore this -------- */
body{
  background-color:gray;
}
.topbar,
.bottombar {
  background-color: yellow;
  text-align: center;
}
.leftbar,
.rightbar {
  background-color: pink;
  text-align:center;
}
.posts {
  border: 2px solid black;
}
.post {
  background: #b2e8c1;
  height: 250px;
  border: 5px solid green;
}
.pagination {
  text-align:center;
}