CODEWITHSUNDEEP
htmlcss
Gavin
Gavin

Reputation: 991

CSS - Image container div not same size as image

I have an image in a container div below which is a div containing text that can scroll. The image can vary in size so the height of the image will vary depending on the image being displayed i.e. it isn't always 400 x 200 as in my example.

My problem is that when the text scrolls there is a space between the image and the point where the text should scroll behind the image. This seems to be because the image container div is not the same size as the image.

This JSFiddle shows the problem https://jsfiddle.net/t0ag2z5k/50/

Can anyone tell me both why this is happening and how to fix it please?

CSS code below...

#plotdetails {
    display: flex;
    flex-direction: column;
    float: left;
    width: 400px;
    z-index: 5;
    position: fixed;
    height: 100%;
}

#plotdetails #plot-img-container {
    display: inline-block;
}

#plotdetails #plot-img-container img{
    width: 400px;
    display: inline-block;
}

#details-text {
    padding: 0 20px 0 20px;
    overflow-y: scroll;
    flex: 1;  
}

HTML here

<div id="plotdetails">
<div id="plot-img-container">
    <img src="http://placehold.it/400x200">
</div>
<div id="details-text">
    <h1>Lot's of words here....</h1>
</div>
</div>

Upvotes: 0

Views: 2196

Answers (1)

rsn
rsn

Reputation: 630

Why do you want your image to be display as an inline-block when it's not utilized as such? Try (https://jsfiddle.net/t0ag2z5k/52/):

#plotdetails #plot-img-container img{
    width: 400px;
    display: block;
}

Upvotes: 4

Related Questions