3 replies [Last post]
notfarnow
Offline
newbie
Santa Monica
Last seen: 12 years 42 weeks ago
Santa Monica
Joined: 2005-04-11
Posts: 6
Points: 0

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:

#pic{
float:left;
height:auto;
width:150px;
}

#testimonials{
width:400px;
height:auto;
border: 3px double #d64375;
padding: 2px;
text-align:center;
margin:auto;

}
#testimonial{
float:right;
text-align:left;
padding: 6px 6px 6px 6px;
line-height:16px;
width: 220px;

}
//this is the div I want to clear
#spacer{
width:400px;
height:20px;
clear:both;
}

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:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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:

#testimonials{clear:left;overflow:hidden;}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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".

notfarnow
Offline
newbie
Santa Monica
Last seen: 12 years 42 weeks ago
Santa Monica
Joined: 2005-04-11
Posts: 6
Points: 0

AWESOME!

Sorry for the late post, but that worked like a CHARM! Thanks so much.
overflow: hidden success!