container border not rendering on page that uses divs for content [Archive]

pmready

05-09-2014, 05:08 PM

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>

pmready

05-09-2014, 05:59 PM

Giving it a height value caused the borders to be seen but every page has a different height so it can't be fixed. 100% didn't work.

pmready

05-09-2014, 08:08 PM

took out all positioning (relative, absolute) and divs are not in their defined locations?