CODEWITHSUNDEEP
csscss-float
MLS1984
MLS1984

Reputation: 307

CSS Clearing floats

I'm working two layers of floats, and the attempt to clear them does not seem to be working properly.

Here is the page: http://cloud-catering.com/new/about.php

The Fiddle: http://jsfiddle.net/MLS1984/twrXh/

The fiddle doesn't show the issue properly though, so the site is a better reference for the issue. I'm not sure why when I'm using the:

<div class="clear"></div>

to clear the previous floats, the photos under the lists are moved all the way to the right.

Upvotes: 0

Views: 137

Answers (3)

sg3s
sg3s

Reputation: 9567

I would suggest you use the clearfix trick.

Without using clear: both|left|right it will force a container to clear it's child elements, making it ideal to use in a situation where there might be right and left floated content and a middle container with floating elements....

http://nicolasgallagher.com/micro-clearfix-hack/

It's a lot better than using extra tags to clear containers/floating elements if you just want to contain them in their parent page....

Upvotes: 0

Matt K
Matt K

Reputation: 6708

Try extending your left-hand menu all the way down the page. Or put a margin to the left of the images. See my comment above for the explanation.

Upvotes: 2

Simone
Simone

Reputation: 21292

Try to use :after pseudoclass to clear floats, it's easier

.myDiv:after { content:''; display:block; clear:both; }

Upvotes: 0

Related Questions