Include a margin / gap between columns and footer in my CSS layout - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Column Layout

Description

Include a margin / gap between columns and footer in my CSS layout

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

body {<!--from ww w.  ja  v  a  2 s.  c o  m-->
   background-color: #F7F7F0;
}
header {
   background-image: url("https://www.java2s.com/style/demo/Opera.png");
   background-repeat: no-repeat;
   width: 1000;
   height: 200;
   align-content: center;
   margin-left: 140px;
}
h1 {
   color: #ffffff;
   padding: 10px;
   text-align: left;
}
#nav ul {
   list-style: none;
   background-color: black;
   margin-left: 140;
   margin-right: 280;
   height: 40px;
   margin-top: 0;
   color: white;
}
#nav li {
   display: inline-block;
   padding-top: 10px;
   padding-left: 50px;
   padding-right: 50px;
   padding-bottom: 10px;
}
#col1 {
   margin-left: 10%;
   width: 20%;
   height: 30%;
   float: left;
   background-color: lightgray;
}
#col2 {
   float: left;
   margin-left: 1%;
   height: 30%;
   width: 20%;
   background-color: lightgray;
}
#col3 {
   float: left;
   width: 20%;
   height: 30%;
   margin-left: 1%;
   background-color: lightgray;
}
#Content::after {
   clear:both;
   content:' ';
   display:block;
   margin-bottom:20px;
}
#footer {
   padding-top: 20px;
   border-top: 1px solid #545454;
   background-color: #b6c5a3;
   height: 60;
   margin-left: 10%;
   margin-right: 20%;
   color: #492b40;
}


      </style> 
 </head> 
 <body> 
  <header> 
   <div id="heading"> 
    <h1> Hello there !!! </h1> 
   </div> 
  </header> 
  <div id="nav"> 
   <ul> 
    <li> Home </li> 
    <li> About </li> 
    <li> Contact </li> 
    <li> Links</li> 
   </ul> 
  </div> 
  <div id="Content"> 
   <div id="col1">
     col1 
   </div> 
   <div id="col2">
     col2 
   </div> 
   <div id="col3">
     col 3 
   </div> 
  </div> 
  <div id="footer"> 
   <p>Copyright 2004 xyz Association</p> 
   <p>All rights reserved etc etc...</p> 
  </div>  
 </body>
</html>

Related Tutorials