Here is a working faux columns example for you. If you copy and paste this into your program, it will work in Firefox. Did not text on other browsers.
Here is the
css
- Code: Select all
body{
margin: 0;
text-align: center;
background: #660000;
}
p {
color: #FFFFFF;
font: 14px Verdana, Arial, Helvetica, sans-serif;
}
div#wraptop {
margin: 0 auto;
width: 780px;
background: url(top.jpg) no-repeat;
height: 19px;
}
div#wrapmiddle {
width: 780px;
margin: 0 auto;
background: url(middle.jpg) repeat-y;
overflow:hidden;
}
div#wrapbottom {
width: 780px;
margin:0 auto;
background: url(bottom.jpg) no-repeat;
height: 19px;
}
div#header {
height: auto;
width: 780px;
margin: 0 auto;
}
div#column1 {
float: left;
height: auto;
width: 146px;
margin: 5px 10px 5px 20px;
padding: 2px;
}
div#column2 {
float:left;
width: 568px;
margin: 5px 5px 5px 5px;
padding: 2px;
}
div#footer {
height: 35px;
width: 780px;
margin: 0 auto;
clear: both;
}
Here is the
html obviously missing your header and footer graphics
- Code: Select all
<body>
<div id="header"><p>Here is your Header</p> </div>
<div id="wraptop"></div><!--end wrap top div -->
<div id="wrapmiddle">
<div id="column1"><p>Here is your<br />
column1 div </p></div>
<div id="column2">
<p> </p>
<p>Here is your column2 div </p>
<p> </p>
</div><!--end column2 div -->
</div><!--end wrap middle div -->
<div id="wrapbottom"></div>
</div><!--end wrap div -->
<div id="footer"><p>Here is your footer</p></div>
</body>
</html>
The graphics I created are attached as well.
See if this helps you understand how faux columns are done ok!
