Home/ Questions/Q 6188773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T02:17:37+00:00

This is what I have This is what I want Basically the orange element

  • 0

This is what I have

This is what I have

This is what I want

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)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0