CODEWITHSUNDEEP
css
IlludiumPu36
IlludiumPu36

Reputation: 4304

Nested div elements wrapping with float left

I have four nested div elements with float:left and the fourth element is wrapping below the first due to the length of the container.

.container {
    width: 320px;
    height: 110px;
    overflow-x:scroll;
    border: 1px solid blue;
}

.nested      {
    width: 80px;
    height: 80px;
    background: red;
    float:left;
    margin:5px;

}

<div class='container'>
<div class='nested'></div>
<div class='nested'></div>
<div class='nested'></div>
<div class='nested'></div>
</div>

How do I stop the wrapping so that the viewed elements are scrollable in the x axis (or even hidden/truncated)?

http://jsfiddle.net/Tku65/

Upvotes: 0

Views: 499

Answers (1)

Gibbs
Gibbs

Reputation: 22956

Demo

  white-space: nowrap;

Add this property to your container.

Try to avoid float properties. Use display: inline-block; in this case.

Upvotes: 3

Related Questions