Thesis: How to border content area?

I'm trying to border off my main content area here http://www.ihowtowriteiphoneapps.com/. You can see I have the sides bordered and have margin at the top and bottom. Now I need to border the top and bottom.

My current implementation is making use of the left sidebar for a right side border on content:

.custom #sidebars {...}

and the following for a left side border on content:

.custom #content_area, #content_area .page {...}

When I try to start doing anything with the top or bottom, the issue of length comes into play. Borders stretch out over the sidebar. The bottom actually produces two borders; one of them is floating to the far left bottom. Probably something to do with the page class that is used everywhere.

There isn't just a box around the content. Divs overlap in that area, which makes the top and bottom especially difficult. Any other suggestions on how I can get the top/bottom bordered?
brettrAsked:
Who is Participating?
 
Jason C. LevineNo oneCommented:
>> Do you notice the left side vertical border

Yes.  You over-defined the custom class.

.custom #content_area, #content_area .page {
    border-left: 1px solid gray;
    margin-bottom: 10px;
    margin-top: 10px;
}

#content_area is the whole width of the page.  You want to apply the left border at the #content div only, not that much higher up on the tree.

Do you use Firebug?  If not, you should.  It really helps you pinpoint CSS issues.

>> I'll create a new question if the battle continues on the bottom div.

Yes.  You're sort of outside WordPress issues at this point.  Pure HTML/CSS now.
0
 
Jason C. LevineNo oneCommented:
>> There isn't just a box around the content

No, there is.  <div id="content">

But it's offset 2.2ems on the left by the div above it with the following CSS:

.full_width .page {
    margin: 0 auto;
    padding-left: 2.2em;

If you remove the padding left and add borders to the top and bottom of #content you get the desired effect:

 borders added
0
 
brettrAuthor Commented:
Not really but take a look now.  There a gap in the top left corner.  Bottom border is floating instead of at the bottom of the two side borders.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Jason C. LevineNo oneCommented:
The gap on the left comes from:

.full_width .page {
    margin: 0 auto;
    padding-left: 2.2em;

If you set padding-left to zero, it goes away:

.custom .full_width .page {
    padding-right: 0;
    padding-left: 0;
}

>> Bottom border is floating instead of at the bottom of the two side borders.

Not sure I see what you see regarding that.  Can you post a screenshot and highlight the area?
0
 
brettrAuthor Commented:
Have the top border fixed.  It's the bottom border that is an issue.  I've gotten it to move down flush with the bottom of each side border.  The problem now is that the border is too long.  I have the border set in

.custom #content_box {...}

Do you see a way to get the bottom border to stop at the right border?
0
 
Jason C. LevineNo oneCommented:
Take border bottom out of .custom #content_box and put it here instead:

.custom #content {
    border-top: 1px solid gray;
    height: 100%;
}

That should do it.
0
 
brettrAuthor Commented:
that didn't work.  that's back to what was going on earlier with the bottom border floating.

Why border-top?
0
 
Jason C. LevineNo oneCommented:
I just looked and the content area is now bordered.  What do you mean by "bottom border floating"?

>> Why border-top?

I was just copy/pasting the entire CSS block so you knew where to put border-bottom.
0
 
brettrAuthor Commented:
>>What do you mean by "bottom border floating"?

Notice there is not border at the bottom because it is up higher.  The bottom border should be just above the footer and flush with the bottom of both side borders.
0
 
Jason C. LevineNo oneCommented:
>> Notice there is not border at the bottom because it is up higher.

Okay, I forgot to ask you which browser you were using.  It looks fine in Firefox because I have AdBlock, not so fine in Chrome or IE where I don't have it.  That's why I wasn't see what you were seeing.

So the issue is you will have to implement an equal-heights fix for this theme:

http://abcoder.com/css/css-equal-height-columns/

0
 
brettrAuthor Commented:
I'm not sure how to do that since it is divs inside of divs and not columns.
0
 
Jason C. LevineNo oneCommented:
>> I'm not sure how to do that since it is divs inside of divs and not columns.

You have an outer container (#content_box) with #content and #sidebars within.  #content and #sidebars are your columns that must be of equal height.  You could either use one of the pure CSS solutions or the jquery solution linked above to handle it.  Some changing of the sample code to fix your exact situation will be required.
0
 
brettrAuthor Commented:
Ok, I'll give it a try.

Do you notice the left side vertical border hugging the browser window in IE (9) and FF?  I can't really see it in Safari.  You know of a way to get rid of it?  Last question for this post  :)

I'll create a new question if the battle continues on the bottom div.
0
 
brettrAuthor Commented:
Thanks for all of the great help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.