Menu
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.
578
Users can see that all div elements inside the parent div are displaying inline. Approach 2: In this approach, we will apply display: inline-block property to all the div which we need to display inline. The display:inline-block property will set the all div elements side by side.
Using inline-block property: Use display: inline-block property to set a div size according to its content.
The height and width of an inline element cannot be set in CSS. You cannot set the height and width of block-level elements in CSS. Inline elements flow left to right, meaning inline elements appear on the same line unless the line wraps or there's an explicit line break ( <br/> )
So, by nature, it doesn't matter how much content the element contains because its width is always 100%, that is, until we alter it. Think of elements like <p> , <article> , <main> , <div> , and so many more.
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/
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
