I am using a containe/wrapper div that centers content and creates a border on most pages. You can see this at www.loudounfreedom.com. There is a border that is visible on pages that do not use divs for layout. However, the border is not rendered on a page that uses div for layout www.loudounfreedom.com/2014Berry.html. the content is centered but the border does not show. I assume there is an over-riding issue again. I tried working with positioning, float, or overflow but things are not working.
the css
#page {
background:#FFFFFF;
margin:0 auto 0 auto;
margin-left:auto;
margin-right:auto;
width: 1350px;
text-align: center;
border:1px solid #e99a02;
border-left: 1px solid #e99a02;
border-right: 1px solid #e99a02;
border-bottom: 1px solid #e99a02;
border-color: #e99a02;
position: relative;
clear: both;
}
other divs
#top {
width:1350px;
height:150px;
background-color:#ffffff;
text-decoration:none;
position: relative;
top: 0px;
}
#headerslice {
width:1350px;
height:5px;
background-color:#e99a02;
text-decoration:none;
position: absolute;
top:150px;
}
the sample html
<body bgcolor="#ffffff" marginwidth="0" marginheight="0" width="1350px">
<div id="page">
<div id="top">
<img src="images/banner.jpg" width="1350" height="150" border="0">
</div>
<div id="headerslice">
<img src="images/spacer.gif" width="1" height="5" border="0">
</div>
</div>
</body>
Bookmarks