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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineDon't talk to me.Commented:
>> 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
Jason C. LevineDon't talk to me.Commented:
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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. LevineDon't talk to me.Commented:
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. LevineDon't talk to me.Commented:
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. LevineDon't talk to me.Commented:
>> 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. LevineDon't talk to me.Commented:
>> 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
Jason C. LevineDon't talk to me.Commented:
>> 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brettrAuthor Commented:
Thanks for all of the great help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.