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)
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.
Here is a fiddle : http://jsfiddle.net/XK7tS/
