I’m trying to use the box model to display the following information next to the
footer of my home page, each item occupying it’s own line in a separate div tag.
Company name (centered)
Separator gif.
Company Description
When I tried to add a container 300px high (# bottom row) to surround the 3 items, the company name,the gif
and the description overlap, and display side by side instead of from top to bottom each on a separate line.
I tried using clear:both; and top but that didn’t work. Any ideas ? thanks so much
Should display like this:
Atlantic Restorations
Separator gif
Description
** code **
Index.htm
<!– ###### bottom row start ###### –>
<div id="ar-row-bottom" style="border:1px solid #000000;">
<div id="ar-br-companyname-text">Atlantic Restorations</div>
<div id="ar-br-companysep"><a href="index.htm"><img src="images/separator.gif" width="370" height="44" alt="" border="0" /></a></div>
<div id="ar-br-companydesc"> Tables, seating, casepeices, mirrors and art… <br> Showcasing the finest quality in antique furniture.</div>
<div id="ar-footer">Copyright © 2010 Atlantic Retorations All rights reserved.</div>
</div>
</div>
<!– ###### ar body end ###### –>
Mainstyle.css
#ar-row-bottom {
position:relative;
border-top:1px solid #ffffff;
height:300px;
}
#ar-br-companyname-text {
position:absolute;
text-align:center;
border:0px solid #000000;
font: 40pt Castellar;
}
#ar-br-companysep {
position:absolute;
text-align:center;
border:0px solid #000000;
}
#ar-br-companydesc {
position:absolute;
text-align:center;
border:0px solid #000000;
font: 24px Book Antiqua;
}
#a5-footer {
font:11px arial, helvetica, sans-serif;
color:#AFAE84;
padding:5px 0px 5px 0px;
text-align:center;
background:#F3F2C2;
}
