CODEWITHSUNDEEP
htmlcss
sveti petar
sveti petar

Reputation: 3797

DIV gets cut off even though width and height are defined

I have this on my page:

<div id="result" class="thumbholder"><img src="img/thumbs/thumb01.png" alt="thumb" /></div>

CSS:

.thumbholder{
width:100px;
height:100px;
text-align:center;
overflow:hidden;
border-radius:6px;
float:left;
margin:0;
}

The #result div is not defined anywhere in CSS (I checked).

The div refuses to show up in 100 x 100 size, instead it cuts off part of the height. It's not that it's just not being displayed all the way, as I can see the lower rounded corners - it actually has a smaller height than defined. Why is this happening?

The image inside is also 100 x 100 in size, but that doesn't matter, the same thing happens whatever I put inside it.

EDIT: defining the height inline also doesn't help.

Upvotes: 0

Views: 7789

Answers (3)

OACDesigns
OACDesigns

Reputation: 2299

Try using !important to override other code that might be causing the height to not be 100px

.thumbholder
{
    width:100px !important;
    height:100px !important;
    text-align:center;
    overflow:hidden;
    border-radius:6px;
    float:left;
    margin:0;
}

It's not a great solution, but it could help you debug the problem. Otherwise use Chrome's inspector (or firebug) to find out what is overriding your height definition

Upvotes: 1

srini
srini

Reputation: 884

try this instead 

      <div style="clear:both;"></div>
      <div id="result" class="thumbholder"><img src="img/thumbs/thumb01.png" alt="thumb" /></div>

Upvotes: 0

jonshot
jonshot

Reputation: 805

Have you checked it out in Firebug to see if the div is inheriting any other styles? Maybe adding 'display:block' might fix it, sounds like it could be displaying as an inline element if your height property is being ignored... Or possibly there is a max-height: set somewhere, in which case 'max-height:100%' could work.

Upvotes: 1

Related Questions