Stacking content vertically and horizontally with inline-block and float left

Question

So I'd like to stack items vertically within a div and stack multiple divs horizontally like the following illustration:

Sample Layout

Each div is defined with a class name of floatbox

<div class="floatbox">
    <label>Screening Type:</label>
    <select></select>
</div>

For which I was applying the following css

.floatbox {
    display: inline-block;
    width: 175px;
    margin: 0;
    padding-top: 5px;
    float: left;
}

I need float because IE8 will treat it as a block level element unless you use float. However, when I add it, the items get shifted around. I can correct this by adding two extra <br\> elements, but I'm wondering if that's the best sollution

See this fiddle for an example

score 4 · Accepted Answer · answered Jul 29 '13 at 14:16

4

the problem is that not all the floatbox elements have the same height, so you can fix it by giving them one:

.floatbox {
    ...
    height:45px;
    ...
}

works well with your jsfiddle example.

another way to force a 'line break' with floating elements is using the css clear property:

<div style="clear:both"></div>

put this after every 4th div box to ensure that it will break there. then you dont have to use a fixed height, and you can remove all <br> tags from the code (for both solutions)

answered Jul 29 '13 at 14:16

x4rf41

5,184
2
22
33

1

You could also use the CSS3 property `nth-of-type` and add the clear in there instead of extra markup. Obviously this is a solution for newer browsers, but using the excellent selectivizr JS library that'll add backwards ability. – dotty Jul 29 '13 at 14:24

score 0 · Answer 2 · answered Jul 29 '13 at 14:21

You can do the above answer but you don't need float at all really if you use display:inline-block. http://jsfiddle.net/ApKHE/10/ I only added in float with the buttons to position them under the right box but you can place them wherever you want.

.floatbox {
display: inline-block;
width: 175px;
margin: 0;
padding-top: 5px;

}
.floatbox input, select, label {
    width: 150px;
    margin: 0px;
}
.EntryFieldSet {
    width: 735px;
    padding-left: 15px;
    overflow: hidden;
}
#screeningButtons{
    float:right;
    padding-right:30px;
}

Stacking content vertically and horizontally with inline-block and float left

2 Answers2