Menu
I am looking for the best way to have multiple columns using inline-block. Everything works great except for when the browser is resized. The 2nd column will be pushed under the first column as one would expect with inline-block. I understand why that happens, what I need to know is if there is a way to make a horizontal scroll instead of pushing the second column down. I thought overflow:hidden would work, but it does not seem to.
I am not setting any widths right now and would like to keep this as fluid as possible.
<div>
<div id="col1"></div>
<div id="col2"></div>
</div>
col1 and col2 are inline-block with no width set and they display side by side when the browser view is wide enough. When the users browser is re-sized smaller, col2 displays underneath col1. I want them to always be side by side and have a horizontal scroll if needed.
375
You can change the height of the inline-block meanwhile you can't change the inline elements.
As a result, the elements can sit next to each other. The major difference between display: inline; and display: inline-block; is that, display: inline-block; also allows us to set the width and height of the element. We can prevent inline-block divs from wrapping by adding suitable Bootstrap classes.
In normal flow, inline elements display in the inline direction, that is in the direction words are displayed in a sentence according to the Writing Mode of the document. Block elements display one after the other, as paragraphs do in the Writing Mode of that document.
Add white-space: nowrap to the parent of the elements that have display: inline-block.
107
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
