CODEWITHSUNDEEP
css
user1785870
user1785870

Reputation: 477

Dont wrap row of divs

How to create set of float:right divs one next to another and make them not wrap, no matter how much of them exists or how wide is any of them. If they together are wider than viewport, then x-scroll should appear.

Content inside those divs should wrap normally.

CSS only would be good.

Upvotes: 2

Views: 462

Answers (2)

David Thomas
David Thomas

Reputation: 253416

Style the parent element with white-space: nowrap;, though this only works with display: inline (or display: inline-block;) elements. Given the following HTML:

<div id="parent">
    <div class="child"></div>
    <!-- there's quite a lot of these... -->
    <div class="child"></div>
</div>

And the CSS:

#parent {
    white-space: nowrap;
}

#parent .child {
    display: inline-block;
    /* there's some other CSS for aesthetics */
}

JS Fiddle demo.

Unfortunately I don't think there is a way of forcing float-ed elements to not wrap to a new line.

To preserve or, rather, force normal line-wrapping for descendant elements you'll have to explicitly over-ride the inheritance and set white-space: normal (as well as, possibly, define a width or max-width)

/* other CSS remains intact */

#parent .child {
    display: inline-block;
    /* irrelevant/aesthetic CSS */
    white-space: normal;
    max-width: 8em;
}

JS Fiddle demo.

Upvotes: 3

thirtydot
thirtydot

Reputation: 228202

Few elements: http://jsfiddle.net/thirtydot/A8duy/

Many elements: http://jsfiddle.net/thirtydot/A8duy/1/

HTML:

<div class="block-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>​

CSS:

.block-container {
    text-align: right;
    white-space: nowrap;
    float: left;
    width: 100%;
    margin-bottom: 1em;
    border: 1px solid red;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.block-container > div {
    width: 50px;
    height: 50px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    text-align: left;
    white-space: normal;
    border: 1px solid blue;
}

Upvotes: 0

Related Questions