How to prevent other elements from aligning right when one element is floated left?

Question

[EDIT] Thanks to herkulano and GerManson whose fixes worked for me.

But I am unable to decide which is better, reliable and cross-browser compatible? "overflow" or "clearfix:? Please help me with this, and I am good to go.

If my question is not clear, it will be, now. Just read on please...

(I am trying to display some thumbnails in php and these are the respective codes I am using.)

1. The following is the CSS code that I am using:

#gallerythumbnailsx { margin: 10px; }
#gallerythumbnailsx .gallery-item { float: left; margin-top: 10px; text-align: center; }
#gallerythumbnailsx img { border: 2px solid #cfcfcf; margin-left: 5px; }
#gallerythumbnailsx .gallery-caption { margin-left: 0; }

2. related php code used is:

<div id="gallerythumbnailsx"><?php echo show_all_thumbs(); ?></div>
<p>Aahan is great!</p>

3. This is how the resultant HTML is displayed:

<div id="gallerythumbnailsx">
    <dl class="gallery-item">
        <dt class="gallery-icon">
            <a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx.jpg"></a>
        </dt>
    </dl>

    <dl class="gallery-item">
        <dt class="gallery-icon">
            <a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx1.jpg"></a>
        </dt>
    </dl>

    <dl class="gallery-item">
        <dt class="gallery-icon">
            <a href="http://example.com/"><img width="100" height="75" src="http://example.com/xxx3.jpg"></a>
        </dt>
    </dl>
</div>

Unfortunately this is how it is being displayed (screenshot). The issue as you can see, is that the text "Aahan is great!" is being pushed to the right of the thumbnails since I use float: left for thumbnails in the CSS. I want the text in a new line.

Benjamin Udink ten Cate · Answer 1 · 2011-09-07T23:49:58.560

2

add p{clear:left;} to your CSS

awesome article explaining all floats

Added a JSFiddle for you

This uses the existing CSS (well it ignores the #gallerythumbnailsx .gallery-caption { margin-left: 0; } and #gallerythumbnailsx .gallery-item { float: left; margin-top: 10px; text-align: center; } since I don't see why you would need em.

edited Sep 07 '11 at 23:49

answered Sep 07 '11 at 23:31

Benjamin Udink ten Cate

12,717
4
45
67

Sorry I wasn't clear. I want to make changes only to the given css ids/elements. I hope I am clear. – Aahan Sep 07 '11 at 23:36
updated my answer with a example where you use only the existing css – Benjamin Udink ten Cate Sep 07 '11 at 23:43
Really sorry again. Please see my edits to the question. I am more clear now (I think). Thanks. – Aahan Sep 07 '11 at 23:51
In that case, check GerManson's solution – Benjamin Udink ten Cate Sep 07 '11 at 23:57
It worked. But I am concerned about two things now. (1) Is it compatible in all browsers, even IE6? (2) What is `overflow: auto;` actually doing? I mean, from description of overflow's auto parameter "it adds a scroll-bar to see the rest of the content." (He didn't answer, so I am asking you.) – Aahan Sep 08 '11 at 00:01
It means that if the content is clipped (by setting a fixed height/width on the `id="gallerythumbnailsx"`) scrollbars will be displayed. If no size is set, scrollbars are never shown – Benjamin Udink ten Cate Sep 08 '11 at 00:07
I think thats up to you: http://stackoverflow.com/questions/2373544/clearfix-vs-overflow – Germán Rodríguez Sep 08 '11 at 00:53

score 1 · Answer 2 · answered Sep 07 '11 at 23:45

1

This will fix it, hopefully

#gallerythumbnailsx { margin: 10px; overflow: auto; }

answered Sep 07 '11 at 23:45

Germán Rodríguez

4,276
1
18
19

It worked. But I am concerned about two things now. (1) Is it compatible in all browsers, even IE6? (2) What is `overflow: auto;` actually doing? I mean, from description of overflow's auto parameter "it adds a scroll-bar to see the rest of the content." – Aahan Sep 07 '11 at 23:56
it grows the container div as if the float elements where in the flow of the content. When the div has a defined fixed height and the content grows beyond that, it adds a scrollbar. – Germán Rodríguez Sep 08 '11 at 00:38
Now, which in your opinion is better? The "clearfix" class method that [herkulano suggested here](http://stackoverflow.com/questions/7341595/how-to-prevent-other-elements-from-aligning-right-when-one-element-is-floated-lef/7341847#7341847) or the `overflow: auto;` one? I repeat, reliability and cross-browser compatibility (even IE6/IE7) is my priority. Thanks. – Aahan Sep 08 '11 at 00:41
I think that is up to you http://stackoverflow.com/questions/2373544/clearfix-vs-overflow – Germán Rodríguez Sep 08 '11 at 00:53

score 1 · Answer 3 · answered Sep 08 '11 at 00:12

1

Another way is to use the clearfix method on #gallerythumbnailsx it is cross-browser and this way you can reuse it elsewhere, just add the clearfix class where you use floats.

I made a working example: http://jsfiddle.net/XhRk6/

The .clearfix util class was taken from: http://html5boilerplate.com/

answered Sep 08 '11 at 00:12

herkulano

548
3
10

You mean clearfix works on every browser (IE6,7,8,9; Opera, Safari, Firefox and Chrome - including older versions)? – Aahan Sep 08 '11 at 00:15
My theme already has css for `clearfix:after` so I didn't add any extra css (not even `clearfix:before` etc) and just added the class to the div and it worked. But as @GerManson suggested `overflow: auto;` also worked. Which do you think is better? – Aahan Sep 08 '11 at 00:23
clearfix is better, just because it is non modern cross-browser, this includes ie6/7. – herkulano Sep 08 '11 at 00:27

How to prevent other elements from aligning right when one element is floated left?

3 Answers3