I have 2 columns with a simple layout. I'm trying to have a bottom div clear both left and right within 1 div, but Not within the whole page. I've tried:
border: 3px double #d64375;
padding: 6px 6px 6px 6px;
//this is the div I want to clear
but it is clearing another div with float: right; on my page creating a large gap. Please see it here: http://www.jennaphillips.com/testimonials.html
Thanks so much for your help! :shrug:
If you just cleared left you
If you just cleared left you would be ok, but you shouldn't use an element specifically for the purpose of clearing it's not good markup
Instead try just clearing your .testimonials elements and ensure that they contain their floated child elements:
Your container (#content)
Your container (#content) needs to create its own display context. That will isolate its contents from other parts of the page and ensure any clears aren't affected by floated content outside of the container. You create a new display context by one of:
- floating the container
- giving it an overflow value other than the default
- using position:absolute or fixed.
The simplest method is normally to use overflow:hidden. If you haven't assigned a height to the container it will still expand to contain its contents.
You should be able to find more detailed information by searching the forums on "containing floats" or "containing clear".
Sorry for the late post, but that worked like a CHARM! Thanks so much.
overflow: hidden success!