My #container div sets a 15px margin on the top and bottom. Unfortunately, the bottom margin does not seem to be working unless overflow:hidden is set. Check the sidebar on the homepage for an example.
I can't set overflow:hidden on #container because the sub-menu will be hidden under the footer on shorter pages. For example at http://themeforward.com/demo2/?page_id=1846 when I set overflow:hidden on container the sub-menu under 'Categories' becomes hidden.
My current CSS
#container {
max-width: 960px;
margin: 15px auto
}
Because you've floated your sidebar, the container is only growing to the height of main content. You just need to add a clearfix to the container element and the container will grow to the height of the sidebar and the margin-bottom will be applied.
The sidebar is breaking out of the container because it's not cleared. You'll need to use a clearfix on the container -- setting "overflow:hidden;" on it would be one way but since you can't use that, you'll need another way (having said that though, I didn't see any problems with the submenu even when the container DOES have overflow:hidden;).
Try adding the following code in your CSS and then add a class "clearfix" to your container.
You don't need to add another DIV at all, you really just need to add the class "clearfix" to the existing container div and make sure the code that I posted above is somewhere in your CSS file.
My #container div sets a 15px margin on the top and bottom. Unfortunately, the bottom margin does not seem to be working unless overflow:hidden is set. Check the sidebar on the homepage for an example.
I can't set overflow:hidden on #container because the sub-menu will be hidden under the footer on shorter pages. For example at http://themeforward.com/demo2/?page_id=1846 when I set overflow:hidden on container the sub-menu under 'Categories' becomes hidden.
My current CSS
Because you've floated your sidebar, the container is only growing to the height of main content. You just need to add a clearfix to the container element and the container will grow to the height of the sidebar and the margin-bottom will be applied.
The sidebar is breaking out of the container because it's not cleared. You'll need to use a clearfix on the container -- setting "overflow:hidden;" on it would be one way but since you can't use that, you'll need another way (having said that though, I didn't see any problems with the submenu even when the container DOES have
overflow:hidden;).Try adding the following code in your CSS and then add a class "clearfix" to your container.
Clearfix doesn't seem to be working for some reason.
Looks like you (still) haven't applied the class "clearfix" to #container, so it's hard for us to check why it's not working then.
Sorry about that, it is applied on templates individually which I need to change... but it can be viewed here http://themeforward.com/demo2/
No clearfix class anywhere in that one either.
Sorry, I tried to combine them in the same DIV class and it wasn't working. I'm curious if there is a way to achieve this without adding another DIV.
You don't need to add another DIV at all, you really just need to add the class "clearfix" to the existing container div and make sure the code that I posted above is somewhere in your CSS file.
Ok, sounds good! Thanks Senff. Will using the display:table property negatively impact how a site looks in older browsers?
Nope, don't think it should.
@siouxfan45, IE7 does not support display-table attribute.