Issues with CSS property 'float'

Question

I'm trying to responsively position four div elements. My approach is to use the CSS float:left statement (jsFiddle code example).

CSS

.smart-box {
    width: 28%;
    min-width: 330px;
    margin-right: 4%;
    vertical-align: top;
    float: left;
}

HTML

<div class="smart-box">
    <h3>Category 1</h3>
    <ul>    
        <li>...</li>
    </ul>
</div>

<div class="smart-box">
    <h3>Category 2</h3>
    <ul>    
        <li>...</li>
    </ul>
</div>

...

This is an example with desired behaviour of those boxes.

Screenshot #1

Problem

But when the window is (horizontally) too small, the boxes behave in an unwanted way (see screenshot).

Screenshot #2

What do I have to modify to either place #4 under #1 or in the order drafted below?

+-----+    +-----+
|  1  |    |  3  |
+-----+    +-----+

+-----+    +-----+
|  2  |    |  4  |
+-----+    +-----+

Unable to reproduce the issue in either ie11 or chrome.

Bhasyakarulu Kottakota
– Bhasyakarulu Kottakota

2014-07-08 23:32:24 +00:00
Commented Jul 8, 2014 at 23:32 — Bhasyakarulu Kottakota
– Bhasyakarulu Kottakota, Commented Jul 8, 2014 at 23:32

ralph.m · Accepted Answer · 2014-07-08 23:38:09Z

2

A nice way to get the result you showed in your first image is to remove float: left and instead use inline-block:

.smart-box {
    display: inline-block; 
    vertical-align:top;
}

answered Jul 8, 2014 at 23:38

ralph.m

14.4k4 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Frank Conijn - Support Ukraine Over a year ago

Indeed. We're floating way too often! And with IE7 having left the building, browser support for inline-block is nothing to be worried about anymore. +1.

RichardB · Accepted Answer · 2014-07-08 23:37:18Z

1

One way would be to use media queries to add new styles when a screen width gets below a certain size.

@media screen and (max-width:820px) {
    .smart-box3{
        clear:both;
    }
}
}

(I had to give the third box a class of smart-box3)

See: http://jsfiddle.net/LP9bz/

NB It is wrapping like that because the first box is taller than the second. You could also use javascript to set the height of all the boxes to match the tallest one.

answered Jul 8, 2014 at 23:37

RichardB

2,7891 gold badge13 silver badges19 bronze badges

2 Comments

moberemk Over a year ago

This is a pretty good solution, except I should note that this is a good place to use :nth-of-type or :nth-child instead of adding an extra class to clear it. Digg's new front page is a good example of that kind of technique.

RichardB Over a year ago

Yeah, you are right. That would keep the code tidier.

Collectives™ on Stack Overflow

Issues with CSS property 'float'

Problem

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related