Fri, 2010-08-20 15:51
I am utilizing MVC pattern to provide a list of divs that have an image, some text, and a button.
In the image provided you can see the problem. However, I did fix that issue by adding overflow: hidden; to the list-item div.
Is there another way to fix this issue, or can someone explain why overflow: hidden; didn't hide anything?
PS - I couldn't get the HTML to render properly for whatever reason is going, so i just took a snapshot.
div.item { border-top: 1px dotted gray; padding-top: .7em; margin-bottom: .7em; } div.item:first-child { border-top: none; padding-top: 0; } div.item h3 { font-size: 1.3em; margin: 0 0 .25em 0; } div.item h4 { font-size: 1.1em; margin: .4em 0 0 0; } div.item form { float: right; } div.item input, .actionButtons a { color: White; background-color: #333; border: 1px solid black; cursor: pointer; } .actionButtons a { font: .8em Arial; margin: 0 .5em 0 .5em; text-decoration: none; padding: .15em 1.5em .2em 1.5em; } .item-image { float: left; margin: 20px; }
Fri, 2010-08-20 15:53
#1
The "overflow: hidden;" was
The "overflow: hidden;" was put in the div.item selector at the top.
Sat, 2010-08-21 04:59
#2
Gary from this forum does a
Gary from this forum does a good job of explaining various float containment techniques.