brettr
asked on
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?
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?
ASKER
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.
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?
.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?
ASKER
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?
.custom #content_box {...}
Do you see a way to get the bottom border to stop at the right border?
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.
.custom #content {
border-top: 1px solid gray;
height: 100%;
}
That should do it.
ASKER
that didn't work. that's back to what was going on earlier with the bottom border floating.
Why border-top?
Why border-top?
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.
>> Why border-top?
I was just copy/pasting the entire CSS block so you knew where to put border-bottom.
ASKER
>>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.
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.
>> 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/
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/
ASKER
I'm not sure how to do that since it is divs inside of divs and not columns.
>> 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.
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.
ASKER
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for all of the great help.
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: