Three columns

Three columns : three Columns : Layout HTML CSS TUTORIALS

Three columns


 
<html><head>
  <title></title>

<style type="text/css">
#columnRight {
  width: 33%;
  float: left;
  background: #fff;
  padding-bottom: 1em;
}

#columnMain {
  width:47%;
  float: left;
  background: #fff;
  padding-bottom: 1em;
}

#columnLeft {
  width: 20%;
  float: left;
  background: #fff;
  padding-bottom: 1em;
  text-align: justify;

}
#footer {
  clear: both;
  padding-bottom: 1em;
  border-top: 1px solid #333;
  text-align: center;
}

</style>
</head><body>

<div id="header">
  <h1>Main Title</h1>
</div>

<div id="columnLeft">
  <h2>Left Column</h2>

<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>

<div id="navsite">

<h5>Site navigation:</h5>
<ul>
    <li><a href="" id="current">Home</a></li>
    <li><a href="">Products</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Contact</a></li>
</ul>

</div>

</div>

<div id="columnMain">
  <h2>Main Column</h2>
  <p>Text Text Text Text Text Text Text Text Text Text Text Text </p>

    <p>Text Text Text Text Text Text Text Text Text Text Text Text .</p>
</div>

<div id="columnRight">
  <h2>Right Column</h2>
    <p>Text Text Text Text Text Text Text Text Text Text Text Text .</p>
</div>

  <div id="footer">
    <p>Copyright 2003 </p>
  </div>

</body>
</html>

HTML code for linking to this page:

Three columns : three Columns : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » three Columns »

HTML CSS TUTORIALS