CODEWITHSUNDEEP
htmlcss
joshmath
joshmath

Reputation: 158

Images not taking up 100% of div height

I am working on a test site with a fairly easy layout. It's divided up into rows of two columns with alternating widths. My problem is, for whatever reason, my image inserted into one of the column divs is not taking up 100% height of the div. It's short by a few pixels. This is a problem because the two columns in the same row need to appear to be "equal height."

I put a red background on one of the divs with the image problem so you can easily see what I am talking about. I am sure it's fairly simple and I am just overlooking something, but on this Monday morning I can't seem to find it. Any help would be really appreciated. Thanks!

Here is my test site: http://hartsfielddesign.com/test2/test.html

Upvotes: 3

Views: 6962

Answers (6)

TaSvet
TaSvet

Reputation: 442

This code work 100% for me.

font-size:0;
line-height:0;

put it on Parent of img tag.

Upvotes: 1

ram
ram

Reputation: 253

Remove the class .box-expand, .color-box-expand margin and padding. Then set the height on each div. Then it will work properly.

Upvotes: 0

Alfred Larsson
Alfred Larsson

Reputation: 1349

You have the wrong aspect ratio on your image. It is too long.

What you can do to make it easier is to give .vendor-images the image as a background instead of using an img tag. Then you can stretch it out so it doesn't give you that errror.

You could also make the left small image a float:left value and the right float:right and use like 30% width on the left and 65% width on the right. Set no padding and the remaing 5% will give you that padding.

or you could just simply change the aspect ratio of your image.

Upvotes: 0

j08691
j08691

Reputation: 207923

Try adding vertical-align:top to your images rule:

img{
    max-width: 100%;
    width: 100%;
    vertical-align:top;
}

jsFiddle example

Upvotes: 3

MikeM
MikeM

Reputation: 27405

Sometimes inline images have extra padding on the bottom due to inline text sizes/line heights.

Set the div with image to 

font-size:0;
line-height:0;

http://jsfiddle.net/pxfunc/ZC7Xa/1/

edit:

alternatively, set the <img /> to display:block; so the inline padding isn't applied

http://jsfiddle.net/pxfunc/ZC7Xa/3/

Upvotes: 18

user1080894
user1080894

Reputation:

If I understand correctly what you are trying to accomplish, you could set a height value on the <div class="product clearfix color-box"> elements, say 200px for example, and then have the .vendor and .vendor-images, as well as the img contained within those, set to height: 100%

Upvotes: 0

Related Questions