How to make <div> inline? All <div>, even when their total width more than width of their parent?

css html inline

13,219

Solution 1

DEMO: http://jsfiddle.net/marcuswhybrow/7YDfE/3/

Use display: inline-block and white-space: nowrap in combination:

<div class="wrapper">
    <div class="inline"></div>
    <div class="inline"></div>
    <div class="inline"></div>
</div>

Then use the appropriate CSS:

div.wrapper {
    width: 200px; /* or whatever */
    overflow: hidden;
    white-space: nowrap;
}

div.inline {
    display: inline-block;
}

The demo contains a little jQuery animation to illustrate the effect:

DEMO: http://jsfiddle.net/marcuswhybrow/7YDfE/3/

Solution 2

If the div elements are display: inline then applying white-space: nowrap; to the parent element will prevent their wrapping to new lines.

13,219

Author by

Feniks502

Updated on June 04, 2022

Comments

Feniks502 about 2 years
I need to make <div> displayed inline and hide them with "overflow: hidden" for their parent.

Width for <div> is set to 20% with "box-sizing" property, so they are exactly 20% of their parent width.

The usual method, using "float: left" doesn't help, because it makes only 5 <div> displayed in one line, and the rest of them shown in new line under the first 5 <div>.

How to make all <div> displayd inline and hide the rest of them if they are too wide to be shown inside of their parent, using "overflow: hidden"?

I have the following document structure:
```
<body>
<div class="column">
    <div class="header">Some text</div>

    <ul class="item_list">
        <li class="simple"><a href="">Some text<br></a></li>
        <li class="simple"><a href="">Some text<br></a></li>
        <li class="simple"><a href="">Some text<br></a></li>
        ...
    </ul> 
</div> 
```
You can see what I mean here. But I've made it using javascript (setted for <div> "position: absolute" and generated "margin-left" for each elemet) and it causes great problems for future development.
Feniks502 over 13 years

Yes, it is the end of my question)) and I don't know the amount of <div>'s, they generated by the server using database.
Sikshya Maharjan over 13 years

Bear in mind that display: inline-block isn't supported for non 'naturally inline' elements in IE 6, and incompletely in IE 7.
Marcus Whybrow over 13 years

In my tests display: inline does not provide the desired effect on divs: jsfiddle.net/marcuswhybrow/emBjM/1
Feniks502 over 13 years

Thanks! inline-block and nowrap works great, but how to delete appeared whitespaces between elements? The only way I've found is to wride code in one line: jsfiddle.net/2QZeB/1
Marcus Whybrow over 13 years

It is a factor of whitespace in the markup, the solution is to remove any whitespace inbetween the elements: jsfiddle.net/marcuswhybrow/7YDfE/5
Joe Johnston over 10 years

I know this is old: I added an answer based on your whitespace issue below. Code doesn't show well in comments.