I have been asked by several people to demo some of the layout code behind my website. Really it is pretty simple I am using css layout technology in my page layouts (CSS DIV Layers) Of course I still make extensive use of tables. On my journey of designing my website I did discover a unique bit of CSS code that is required by Firefox and not Internet Explorer. Below is an example of code to give you a 3 column layout on a page using Div tags. I have set the “special” line of code to bold. See the pictures below for what happens in IE and Firefox.
<!-- Begin Code -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Div Layers Demo</title>
<style type="text/css">
<!--
body {
text-align:center;
background-color: #00CCFF;
height:100%
}
#frame {
text-align:left;
background-color: #CCCCCC;
position: relative;
visibility: visible;
width: 600px;
margin-right: auto;
margin-left: auto;
float: none;
padding-top: 15px;
padding-bottom: 15px;
overflow: hidden;
}
#leftframe{
text-align:left;
background-color: #CCCCCC;
position: relative;
visibility: visible;
width: 100px;
padding:0;
margin-right: auto;
margin-left: 5px;
float: left;
}
#rightframe{
text-align:left;
background-color: #CCCCCC;
position: relative;
visibility: visible;
width: 100px;
padding:0;
margin-right: auto;
margin-left: 5px;
float: right;
}
#middleframe{
text-align:left;
background-color: #CCCCCC;
position: relative;
visibility: visible;
width: 385px;
padding:0;
margin-right: auto;
margin-left: 5px;
float: left;
}
-->
</style>
</head>
<body>
<div id="frame">
<div id="leftframe">
<h4 align="center">Left Column</h4>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="rightframe">
<h4 align="center">Right Column</h4>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="middleframe">
<h4 align="center">Middle Column</h4>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</body>
</html>
<!-- End Code -->
 |
Above: Firefox without overflow: hidden; css tag |
 |
Above: Internet Explorer without overflow: hidden; css tag |
 |
Above: Firefox with overflow: hidden; css tag |
 |
Above: Internet Explorer with overflow: hidden; css tag |
