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.
The only way I've managed to do this is by using
overflow: visible;
andwidth: 20000px;
on the parent element. There is no way to do this with CSS level 1 that I'm aware of and I refused to think I'd have to go all gung-ho with CSS level 3. The example below has 18 menus that extend beyond my 1920x1200 resolution LCD, if your screen is larger just duplicate the first tier menu elements or just resize the browser. Alternatively and with slightly lower levels of browser compatibility you could use CSS3 media queries.Here is a full copy/paste example demonstration...
You want to define
min-width
on row so when it browser is re-sized it does not go below that and wrap.After reading John's answer, I discovered the following seemed to work for us (did not require specifying width):
I had a somewhat similar problem where a bounded area consisted of an image in a float:left block and a non-float text block. The area has a fluid width. The text would, by design, wrap up along the right side of the image. The trouble was, the text began with an <h2> tag, the first word of which is the tiny word "From." As I resized the window to a smaller width, the non-floated text would, for a certain range of widths, leave only the word "From" at the top of the wrap area, the rest of the text having been squeezed below the float block. My solution was to make the first word of the tag bigger, by replacing the space that followed it with this code, <span style="opacity:0;">x</span> . The effect was to make the first word, instead of "From", "FromxNextWord", where the "x", being invisible, looked like a space. Now my first word was big enough not to be abandoned by the rest of the text block.
For me (using bootstrap), only thing that worked was setting
display:absolute;z-index:1
on the last cell.The CSS property
display: inline-block
was designed to address this need. You can read a bit about it here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/Below is an example of its use. The key elements are that the
row
element haswhite-space: nowrap
and thecell
elements havedisplay: inline-block
. This example should work on most major browsers; a compatibility table is available here: http://caniuse.com/#feat=inline-block