Title: Image Border Blog (Fixed Width)
Last modified: August 19, 2016
---
# Image Border Blog (Fixed Width)
* [Dark Severance](https://wordpress.org/support/users/darkseverance/)
* (@darkseverance)
* [16 years, 10 months ago](https://wordpress.org/support/topic/image-border-blog-fixed-width/)
* I 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/](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](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:
* ```
```
* Any suggestions to get it to work properly, without a set height?
Viewing 4 replies - 1 through 4 (of 4 total)
* [esmi](https://wordpress.org/support/users/esmi/)
* (@esmi)
* [16 years, 10 months ago](https://wordpress.org/support/topic/image-border-blog-fixed-width/#post-1130436)
* What you’re attempting won’t work (as you’ve noticed). Instead set up 3 main
div blocks – Div A to hold the page top image, Div B to hold the middle portion
of the page image (that image only needs to be about 10-20px high) and Div C
to hold the page bottom image.
* Only A and C needs heights set on them via CSS which, obviously, will equal the
height of the relevant images. Don’t apply a height to B.
* ```
.classA {background:url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/A.png) no-repeat left top;
.classC {background:url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/C.png) no-repeat left top;}
.classB {background:url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/B.png) repeat-y left top;}
```
* Thread Starter [Dark Severance](https://wordpress.org/support/users/darkseverance/)
* (@darkseverance)
* [16 years, 10 months ago](https://wordpress.org/support/topic/image-border-blog-fixed-width/#post-1130448)
* That is essentially what I already have. 3 div blocks border_header (.classA),
border_content (.classB) and border_footer (.classC). The border_header and border_footer
blocks are fine.
* If I remove the height from border_content (.classB), which is basically what
you have labeled .classB then the images vanish. They do not repeat and the column
completely vanishes. If I add “height” in, they are there… and I can’t figure
out why it isn’t working.
* From what I understand Firefox has issues since there is nothing in the div container
for the left and right div sides. So I tried putting a spacer in there but that
still didn’t work. So then I just tried putting the image in the div table as
a “img” tag. At least the column will show up when I try to debug it with Firebug
now.
* ```
```
* As you can see:
[http://www.pcxdesigns.com/dev/ipb3-wp/blog/](http://www.pcxdesigns.com/dev/ipb3-wp/blog/)
* The right column is visible but only because I left the “height” in the .css.
The left side column is vanished when I removed the “height” , or rather won’t
repeat down even though the .css should be correct.
* ```
#border_leftBorder {
background: url(http://www.pcxdesigns.com/dev/ipb3/public/style_images/protoculturex/border_mleft.png) repeat-y left top;
width: 40px;
float: left;
}
#border_contMain {
width: 600px;
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: 889px;
float: right;
}
```
* [esmi](https://wordpress.org/support/users/esmi/)
* (@esmi)
* [16 years, 10 months ago](https://wordpress.org/support/topic/image-border-blog-fixed-width/#post-1130611)
* You need to apply a specific width & height any element that is simply being
used to hold a background. Sorry, I just gave an example of using the backgrounds
as you had assigned physical dimensions to the upper and lower blocks originally.
It’s not only Firefox that will have issues if you leave out the physical dimensions.
Opera, Safari and other standard-compliant browsers may have similar problems
as these blocks are empty of all content. The background images aren’t classed
as “content”.
* Thread Starter [Dark Severance](https://wordpress.org/support/users/darkseverance/)
* (@darkseverance)
* [16 years, 10 months ago](https://wordpress.org/support/topic/image-border-blog-fixed-width/#post-1130821)
* Hhhmmm I see. So I’ll just have to keep them has “tables” then unfortunately
until they change web browsers or add more functionality to CSS.
Viewing 4 replies - 1 through 4 (of 4 total)
The topic ‘Image Border Blog (Fixed Width)’ is closed to new replies.
* 4 replies
* 2 participants
* Last reply from: [Dark Severance](https://wordpress.org/support/users/darkseverance/)
* Last activity: [16 years, 10 months ago](https://wordpress.org/support/topic/image-border-blog-fixed-width/#post-1130821)
* Status: not resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics