Hi Doctype,

I have this problem with my design where when there's too much text within a div, it overflows out of the parent div.

I can't figure this one out - it only is a problem in Chrome.

http://simplelist.heroku.com/site/lists/2

1 answer

Guffa 316
1
point

What's actually happening is that the right padding, that you used to keep the content inside the div, is not working in Chrome. That's not really surprising, as you are applying it to an inline element, and I would expect to see some more browsers having problem with this in some form or the other.

Instead of using relative positioning to place the element outside the div and then try to use padding to get it to display inside the div again, use something that limits the content from the start. You can use floating elements:

.item { clear: left; overflow: auto; }
.item-checkbox { float: left; width: 20px; }
.item-name { float: left; width: 255px; }
.item-description-link { float: left; width: 10px; font-size: x-small; }

I tried it in Chrome and Firefox, and it looks fine.

Answered about 7 years ago by Guffa