Tryit Editor v3.6

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
  font-size: 35px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>CSS Template using Float</h2>
<p>In this example, we have created a header, three equal columns and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect.</p>

<div class="header">
  <h2>Header</h2>
</div>

<div class="row">
  <div class="column" style="background-color:#aaa;">Column</div>
  <div class="column" style="background-color:#bbb;">Column</div>
  <div class="column" style="background-color:#ccc;">Column</div>
</div>

<div class="footer">
  <p>Footer</p>
</div>

</body>

</html>

​x
 
<!DOCTYPE html><html lang="en"><head><title>CSS Template</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>* {  box-sizing: border-box;}​body {  font-family: Arial, Helvetica, sans-serif;}​/* Style the header */.header {  background-color: #f1f1f1;  padding: 30px;  text-align: center;  font-size: 35px;}​/* Create three equal columns that floats next to each other */.column {  float: left;  width: 33.33%;  padding: 10px;  height: 300px; /* Should be removed. Only for demonstration */}​/* Clear floats after the columns */.row:after {  content: "";  display: table;  clear: both;}​/* Style the footer */.footer {  background-color: #f1f1f1;  padding: 10px;  text-align: center;}​/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */@media (max-width: 600px) {

Save to Google Drive

Open from Google Drive

Report a Problem: