Line up 3 seperate containers side by side under a header - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Line up 3 seperate containers side by side under a header

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Test for StackOverflow</title> 
  <style>

#container {<!-- w w w.  jav a  2 s. c o m-->
   width: 900px;
   margin: 0 auto;
   background-image:url(https://www.java2s.com/style/demo/Opera.png);
}
#header {
   width: 900px;
   height: 200px;
   background-image:url(https://www.java2s.com/style/demo/Opera.png);
   border-bottom: 2px solid #000;
}
#leftnav {
   float:left;
   width: 150px;
   height: 500px;
}
#rightnav {
   float:right;
   width: 150px;
   height: 500px;
}
#body {
   margin-left: 150px;
   width: 600px;
   text-align:center;
   background-image:url(https://www.java2s.com/style/demo/Opera.png);
}
#footer {
   clear:both;
   background-image:url(https://www.java2s.com/style/demo/Opera.png);
}

      </style> 
 </head> 
 <body> 
  <div id="container"> 
   <div id="header"> 
   </div> 
   <div id="leftnav"> 
    <img src="https://www.java2s.com/style/demo/Opera.png" width="140" height="140"> 
    <br> 
    <br> 
    <img src="https://www.java2s.com/style/demo/Firefox.png" width="140" height="140"> 
    <br> 
    <br> 
    <img src="https://www.java2s.com/style/demo/Firefox.png" width="140" height="80"> 
    <br> 
   </div> 
   <div id="rightnav"> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png" width="140" height="80"> 
    <br> 
    <br> 
    <img src="https://www.java2s.com/style/demo/Opera.png" width="140" height="80"> 
    <br> 
    <br> 
    <img src="https://www.java2s.com/style/demo/Safari.png" width="140" height="80"> 
    <br> 
   </div> 
   <div id="body">
     This Page is still under construction 
    <br> 
    <br> 
    <img src="https://www.java2s.com/style/demo/Firefox.png" width="550" height="362"> 
    <br> 
    <br> 
   </div> 
   <div id="footer"> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials