I use a table with a border:colapse to put border images around my blog. It has been used in a similar fashion since last fall, but with only side borders, none on top and bottom.

Recently I added extra rows to the table to add borders to the top and bottom as well as the sides. The problem is that after I added the top and bottom borders, the table no longer spans the height of my blog as it did previously. I have spent several days now trying to figure out why with no progress. the height of the table (inside top-border to bottom-border) is only 360 pixels, the exact height of my header: which is all the table height spans.

This shouldn't be because boxes are supposed to expand to the size of their content. The CSS boxes for the header, wrapper, two sidebars and main content are all inside the table. In fact all blog boxes are contained within the middle table row, yet the table only spans the header. If this is something simple I'm going to cry from embarrassment, but I can't find it.

There are three table rows, and each row has three TD columns.

Row1: [top-left border image] [top-mid border] [top-right border]
Row2: [left-side border] [entire blog content] [right-side border]
Row3: [bottom-left border image] [bottom-mid border] [bottom-right border]

The 4 corner images are a section of adjoining borders edited to meet at a 45 deg angle. This problem can be seen on my blog. The separation between side and top borders in IE only I am not worried about and can find that later.

Page HTML



Pertinent CSS

Ok, we have a lot of issues here, but the big offender is the use of "position: absolute" in your style.css in your leftsidebar, rightsidebar and mainpage definitions. This is causing your content to be taken out of the flow of the page. By taking this out, you are putting the flow back into the page. Now you should see your border start to flow around them.

But this is half the battle, the other problems is that now your mainpage takes up the width and your left and right menus are at the bottom. You are going to have to move the leftsidebar div to be BEFORE mainpage div. This will get your left sidebar to show first, then mainpage, then rightsidebar at the bottom.

Once you have done this, you are going to have to float your leftsidebar div left, your mainpage div float left, then your rightsidebar div float right. Then to top it off, take out the width: auto from mainpage and instead set it to a width of about 65%.

This should get your content in line in the border. Here are the edits I made to your style.css for those three sections...

.mainpage {
	/*width: auto;*/
	/*position: absolute;*/
	/*top: 370px;*/
	/*left: 240px;*/
	/*right: 240px;*/
	width: 65%;
	color: #000000;
	Padding: 0px;
	float: left;
}

.leftsidebar,
.rightsidebar {
	/*position: absolute;*/
	top: 370px;
	padding: 0;
	color: #000000;
	background: #FFF;
	width: 200px;
	font-size: .8em;
	text-align: left;
	overflow: hidden;
	
}

.leftsidebar {
	left: 40px;
	border-right: 1px solid #DDD;
	float: left;
}

.rightsidebar {
	right: 40px; 
	border-left: 1px solid #DDD;
	float: right;
}

This should get you moving along and on the right track to make further edits. Enjoy!

Thank you. I wasn't aware that position absolute would remove a block from the flow, and it all makes sense now. Removing the absolute from the content ( .mainpage{} ) has taken care of the problem.

The sidebars are usually shorter than the post content and have always had the absolute, so they will remain as they are. I display them last (took them out of the flow it appears) intentionally because I want readers to see the blog posts first. There is nothing more irritating than staring at blank content because a slow loading link in the sidebar is holding up page display. The layout is a bit trickier this way but the payoff getting the content to the reader is worth it.

I have used this "sidebars last" technique on quite a few blog skins for PowerBlogs, WordPress, and Blogger with no problems. Although without borders until now. When this problem came up with the footer I just narrowed the footer to the width of the content for the short pages.

So with the border table now moved down below the post content it will rarely be a problem, except when a single short post (shorter than the sidebars) is displayed alone on the page because the reader either clicked permalink, or comments. To work around that I am going to try to come up with javascript to get the viewport height plus scroll to use as height, and use php to get the function return into the table height.

Thanks again for your help.

Sandra