DarkSeveranceI created a set of Div tags and css to set my blog to a set width and surround it with an image border. I can get everything to work out fine, except for one thing... height of the page.
Main Page Example (looks fine):
http://www.pcxdesigns.com/dev/ipb3-wp/blog/
What it looks like when its messed up:
http://www.pcxdesigns.com/dev/ipb3-wp/blog/?p=8
My CSS:
#border_container {
width:980px;
min-width: 600px; /*this ccould be set to a solid width by pixels if you know what that is */
margin: 10px auto;
}
#border_header {
margin: 0px auto;
width: 100%;
height: 48px;
}
#border_headerLeft {
background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_topleft.png) no-repeat scroll left center;
width: 40px;
height: 48px;
padding: 0px;
margin: 0px;
float: left;
}
#border_headMain{
/*if you have any thing to style in the header it could go here*/
background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_topmiddle.png) repeat-x scroll 0 0;
height: 48px;
width: 900px;
float: left;
}
#border_headerRight {
background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_topright.png) no-repeat scroll left center;
width: 40px;
height: 48px;
padding: 0px;
margin: 0px;
float: right;
}
#border_content {
margin: 0px auto;
}
#border_leftBorder {
background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_mleft.png) repeat-y scroll 0 0;
width: 40px;
height: 900px;
float: left;
}
#border_contMain {
height: 900px;
width: 600px;
width: inherit;
float: left;
}
#border_rightBorder {
background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_mright.png) repeat-y scroll 0 0;
width: 40px;
height: 900px;
float: right;
}
#border_footer {
margin: 0px auto;
height: 48px;
}
#border_footerLeft {
background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_bottomleft.png) no-repeat scroll left center;
width: 40px;
height: 48px;
padding: 0px;
margin: 0px;
float: left;
}
#border_footerMain{
/*if you have any thing to style in the header it could go here*/
background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_bottommiddle.png) repeat-x scroll 0 0;
height: 48px;
width: 900px;
float: left;
}
#border_footerRight {
background: transparent url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_bottomright.png) no-repeat scroll left center;
width: 40px;
height: 48px;
padding: 0px;
margin: 0px;
float: right;
}The only way I could get the main page to fit was to put a height and set it for 900px for: border_leftBorder, border_contMain and border_rightBorder. I tried auto max-height 100% and just removing it. But if I remove the height then the side columns vanish completely.
header.php:
<div id="border_container">
<div id="border_header">
<div id="border_headerLeft"> </div>
<div id="border_headMain"> </div>
<div id="border_headerRight"> </div>
</div>
<div id="border_content">
<div id="border_leftBorder"> </div>
<div id="border_contMain">footer.php
</div>
<div id="border_rightBorder"> </div>
</div>
<div id="border_footer">
<div id="border_footerLeft"> </div>
<div id="border_footerMain"> </div>
<div id="border_footerRight"> </div>
</div>
</div>Any suggestions to get it to work properly, without a set height?
