StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Edit: Now that I had a bit of time to think about this again, I realized that the stuff I was saying in the original answer is true and all, but this is a reflow issue in the nutshell, since it's only showing up when you increase the height. And since it's a reflow issue, the solution is very simple, add position: relative:</p> <pre><code>.data_row { position: relative; height: 22px; width: 100%; padding-bottom: 22px; background-color: #cccccc; } </code></pre> <p>Verified that this works now just fine. I'm going to leave the original answer in tacked for educational purposes.</p> <p>I don't really have a good solution for you, but I think your issue is about more than just overflow: hidden. This is a combination of float + overflow: hidden. If you remove floats and, for example, position elements absolutely on the page, your script works fine in WebKit browsers. No issues with overflow. I'm not sure if that's something you want to do though. The problem is that overflow actually, doesn't only control whether your content is going to show if the container is too small, but in conjunction with floats, it also can set the sizes of the containers themselves.</p> <p>Here's a very simple example of it:</p> <pre><code><div style="width: 500px; overflow: hidden;"> <div style="width: 200px; float: left; height: 100%; background-color: red;"></div> <div style="width: 200px; float: right; height: 100%; background-color: orange;"></div> <div style="background-color: green; overflow: hidden;">aaa</div> <div> </code></pre> <p>Setting overflow, strangely enough, is working as float clearing. It doesn’t clear the float at the element, it self-clears. This means that the element with overflow applied (auto or hidden), will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn’t declared.</p> <p>I think because of that, you are having issues with your design.</p> <p>I suggest you use display: table-cell, if all of the items are supposed to be equal height, table layout if you are not div purist, or absolute positioning.</p> <p>P.S. Sorry, it probably should've been a comment instead of the answer, since I don't really provide a good solution, but it was too long for a comment.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload