Force elements to be horizontally aligned

Question

Let's say I have random children in my div, which has fixed height and width set to 100% to breathe with the layout.

Which CSS must I use to force child elements to align horizontally and when the div's width is smaller then the content, display a scrollbar and not overlap one another?

Fiddle:http://jsfiddle.net/GRBc6/1/

simple css:

.parent{
    width:500px;
    height: 50px;
    background-color: red;
}
.kid{
    width: 150px;
    height: 20px;
     background-color: green;
    float:left;
    margin-left:4px; 
}

float:left ? overflow-x: scroll ? – cjmling Mar 22 '13 at 10:01 — cjmling, Mar 22 '13 at 10:01
You can try in the fiddle above it doesn't work. – Jacob Mar 22 '13 at 10:02 — Jacob, Mar 22 '13 at 10:02

score 16 · Accepted Answer · answered Mar 22 '13 at 10:05

16

if you make the kid an inline-block element and take off the float:left, you can make the parent have white-space:nowrap and it will achieve what you want:

.parent{
    width:300px;
    height: 50px;
    background-color: red;
    white-space:nowrap;
    overflow-x:scroll;
}
.kid{
    width: 150px;
    height: 20px;
    background-color: green;
    display:inline-block;
    margin-left:4px;

}

http://jsfiddle.net/GRBc6/6/

answered Mar 22 '13 at 10:05

Pete

57,112
28
117
166

It works perfects. Thank you! I was missing this: white-space:nowrap; – Jacob Mar 22 '13 at 10:09

score 0 · Answer 2 · answered Mar 22 '13 at 10:17

You need to add 2 properties to .parent: overflow-x:scroll and white-space:nowrap, and change the float property of kids to display: inline-block. Here's working code:

.parent{
    width:500px;
    height: 50px;
    background-color: red; 
    overflow-x: scroll;
    white-space: nowrap;
}
.kid{
    width: 150px;
    height: 20px;
    background-color: green;
    margin-left:4px; 
    display: inline-block;
}

score -1 · Answer 3 · answered Mar 22 '13 at 10:18

-1

or otherwise you could just use table with a single row, tr → td So it won't let the elements inside it wrap

answered Mar 22 '13 at 10:18

user26981

9
1

Tables are for tabular data – Pete Mar 22 '13 at 10:35
it is ok to use this way if the container div isn't fixed – user26981 Mar 22 '13 at 10:54
I guess you're not bothered about coding standards then http://www.w3.org/WAI/wcag-curric/sam48-0.htm – Pete Mar 22 '13 at 10:56
I was worried more about how to make horizontal gallery with non-fixed width via css, but couldn't figure it out. can you propose any solution for that? – user26981 Mar 22 '13 at 11:03
Because if you won't make the container element fixed width, all those whitespace and inline-block elements won't work, so the contents will wrap as well. And if I don't know actual width of the gallery (which I can't know, as far as content is added dynamically), you cannot specify it's width like that. – user26981 Mar 22 '13 at 11:13
you can just set the width of the parent container as 100% and use the above styles to make the content have a horizontal scroller if the number of boxes is greater than 100% width – Pete Mar 22 '13 at 11:16
but won't it look like an iframe, adding extra scroll. The point was to make the whole page horizontal, no matter what width it will have – user26981 Mar 22 '13 at 11:25

Force elements to be horizontally aligned

3 Answers3

Linked