CSS Website Layout Properties Tutorial

Html copy reset

Netbax Online Editor Try it Yourself

body {
  margin: 0;
  background-color: #fff;
font-size:17px;
font-family:tahoma;
}

.header {

padding: 20px;
  text-align: center;
  background-color:#ff3800;
color:#fff;
border:2px solid #ff7e00;
}

.bar {
  overflow: hidden;
  background-color:#ff3800;
color:#fff;
border:2px solid #ff7e00;

text-align: center;
}

.bar a {
  float: left;
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.bar a:hover {
  background-color: #ddd;
  color: black;
}

.column {
  float: left;
  padding: 10px;
  background-color:#ff3800;
color:#fff;
border:2px solid #ff7e00;
  text-align: center;
}

.column.side {
  width: 25%;
}

.column.middle {
  width: 50%;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

.footer {

padding: 10px;
  text-align: center;
  background-color:#ff3800;
color:#fff;
border:2px solid #ff7e00;
}
</style>
<br><br>
<div class="header" style="margin-bottom:8px;padding:30px 0;text-align:center">Header</div>

<div class="bar" style="margin-bottom:8px;padding:12px 0;text-align:center">Navigation Menu</div>

<div class="row">
<div class="column side" style="height:250px;border-right:2px solid #960018;padding:108px 15px 100px 15px;">Content</div>

<div class="column middle" style="height:250px;border-right:2px solid #960018;padding:108px 15px 100px 15px;">Main Content</div>
  
<div class="column side" style="height:250px;border-right:2px solid #960018;padding:108px 15px 100px 15px;">Content</div>
</div>

<div class="footer" style="margin-top:8px;padding:18px 0;text-align:center">Footer</div>