Problem with overflow: hidden; and floats

Question

This is what I have

This is what I want

Basically the orange element is a "container" div which have overflow: hidden; and I want it's child divs to "fit in it" even if it's overflowing to the right. The first picture represent wath I get and the second one what I expect the code from doing.

To get over this problem I have added another div with width: 1000000px; but I don't think that it's a clean solution. Is there any other ways to solve this problem?

(I'm using the latest Google Chrome)

score 3 · Accepted Answer · edited May 23 '17 at 12:13

On your container element, specify white-space:nowrap and don't float the items inside, rather set display: inline-block on them.

Here's an example:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<style type="text/css">
.container{
    height: 130px;
    width: 550px;;
    background: #111;
    white-space:nowrap;
    overflow:hidden;
}

.item{
    display: inline-block;
    width: 200px;
    height: 100px;
    background-color:aqua;
}
</style>

</head>

<body>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>

</html>

UPDATE

Did a bit of reading, and strangely enough, the spaces between successive inline-block elements are removed if you change your html to look like this:

<div class="container">
    <div class="item"></div><div class="item"></div><div class="item"></div>
</div>

Check out the answer to this question: Unwanted margin in inline-block list items.

It works, but now I have about 4px of space after each elements, how do I remove this? — maaudet, Jul 20 '11 at 07:12
fixed the margin problem, update in this fiddle: http://jsfiddle.net/XK7tS/2/ credits to: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ — epoch, Jul 20 '11 at 07:27
Yeah, I found that it's because they are inline elements, so they take any text in-between as actual inline text. I used the negative margin and negative word spacings trick. — maaudet, Jul 20 '11 at 08:57

score 0 · Answer 2 · edited Oct 31 '11 at 05:52

0

Here is a fiddle : http://jsfiddle.net/XK7tS/

edited Oct 31 '11 at 05:52

Chris Frederick

5,482
3
36
44

answered Jul 20 '11 at 07:12

epoch

16,396
4
43
71

Problem with overflow: hidden; and floats

2 Answers2