Style customization help

Agahnim

Hello, I recently installed a Vanilla forum at http://www.captainoccam.com/forum/ . I’m working on creating a custom style for the default theme, and there’s still a lot more for me to do (especially with the colors), but by now you should be able to see what sort of thing I have in mind. I’d like for the “content” div to be a separate color from the rest of the page, with a border around it. On the main discussions page this looks fine, but if you go to some of the other pages such as http://www.captainoccam.com/forum/categories.php , the gray div box doesn’t extend all the way down the page. Is there something I can change in the theme to make this div always extend to the bottom of the page, regardless of how much space is taken up by the content in it?

Dinoboff

For the category page, it's because the ol#Categories is floating. You just need to put it back in the document flow (or add something at the end of div#Content with a clear: both; rule).

<div id="ContentBody"> <ol id="Categories"> ... </ol> <div style="clear: both;"/> </div>

Agahnim

It isn't just the categories page I'm thinking of, though. Even on pages where everything is part of the document flow, the content div box still doesn't extend much further down than the elements it contains. Another example of this is the search page: http://www.captainoccam.com/forum/search.php What can I do to make the content div extend all the way to the bottom of the search page also?

Gauzy

this is one of those things that is "a feature, not a bug." elements only extend as far as the content that is placed within them. there's ways to extend it with javascript and so on and so forth, but as for "pure" methods, i'm not sure of any. this is an issue i've run into many times, so i've learned to design along different lines of thought now.

sorry that this isn't much help, if an "easy answer" exists to this, it'd be as welcome news here as any.

Agahnim

If I'm going to take Dinoboff's suggestion, what do I need to change in the CSS in order to accomplish this? Setting clear: both for the content div just moves the whole content box down the page, without changing its size.

Luke_

use a pseudo tag tag:after { clear:both; content:''; display:block; }

Agahnim

You're saying I should put that in the CSS? I've tried that, and it doesn't do anything. Here's what my CSS for the contend div looks like with your suggestion: #Content { height: 100%; background-color:#DBDBDB; margin:0px 18px 10px 235px; padding: 18px; border-top: 1px solid #0E0E0E; border-right: 1px solid #0E0E0E; border-left: 1px solid #0E0E0E; border-bottom: 1px solid #0E0E0E; tag:after { clear:both; content:''; display:block; } } I've never used this kind of syntax at all before. Is that what you had in mind, or did I misinterpret your comment?

Luke_

#AccountProfile:after, #AccountHistory:after { content:' '; display:block; clear:both; } try the above: in the profile page it should fix your problem.

Agahnim

Yeah, it does. Thanks. How do I fix the same problem on the categories page, though?

wohoo

had the same problem as Agahnim. Thanks for the fix. Agahnim, I fixed the category page the same way, buy adding "CategoryPage:after" as well, the result being this: #AccountProfile:after, #AccountHistory:after, #CategoryPage:after { content:' '; display:block; clear:both; }