Menu
I want to have a row of divs (cells) that don't wrap if the browser is too narrow to fit them.
I've searched Stack, and couldn't find a working answer to what I think should be a simple css question.
The cells have specified width. However I don't want to specify the width of the row, the width should automatically be the width of its child cells.
If the viewport is too narrow to accomodate the rows, then the div should overflow with scrollbars.
Please provide your answer as working code snippet, as I've tried a lot of the solutions I've seen elsewhere (like specify width: 100% and they don't seem to work).
I'm looking for a HTML/CSS only solution, no JavaScript.
.row { float: left; border: 1px solid yellow; width: 100%; overflow: auto; } .cell { float: left; border: 1px solid red; width: 200px; height: 100px; }<div class="row"> <div class="cell">a</div> <div class="cell">b</div> <div class="cell">c</div> </div>At the moment I'm actually hard coding the width of the row to a really big number.
402
Use "overflow: hidden" to avoid floating elements from wrapping a container's text. Unfortunately, any content of the content 's text will wrap underneath it: 
<html> <body> <style> .row { float:left; border: 1px solid yellow; width: 100%; overflow: auto; white-space: nowrap; } .cell { display: inline-block; border: 1px solid red; width: 200px; height: 100px; } </style> <div class="row"> <div class="cell">a</div> <div class="cell">b</div> <div class="cell">c</div> </div> </body> </html> You want to define min-width on row so when it browser is re-sized it does not go below that and wrap.
30
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
