CODEWITHSUNDEEP
csshtml
user3044123
user3044123

Reputation: 11

Position a Div Right Below A Div With a Responsive Image

I have a div which has a responsive image in it that is full width.

The height of the image and width adjusts as the browser resizes.

I would like to position another div right below this div that has the responsive image.

I can't seem to get it right.

Here's what I have:

    <div style="display: block; width: 100% !important; height: auto; display: block; background:      #ffffff; text-align: center;">

    <div style="display: block; min-height: 374px;">
    <img src="yahoo.png" title="THE RESPONSIVE IMAGE" />
    </div>

    <div style="width: 100%; height: 10px; background: #D9594C; position: relative;"></div>
     </div>

You can see the div I want to position below the responsive image has a background.

Thanks so much for your help!

Upvotes: 1

Views: 998

Answers (3)

davidpauljunior
davidpauljunior

Reputation: 8338

It's hard to say for sure, but I think there's confusion here around the height and the responsiveness.

Firstly, the reason you get that big gap under your image is because it's parent div has min-height: 374px set on it. The div will expand to fit the image's height, so this isn't really needed.

However, you also talk about how the height and width of the image should adjust when resizing. To do that, you'll need to make sure the image has width: 100% so it is only ever as wide as it's parent div.

I've separated out your HTML and CSS, and added comments in the CSS to try and help. Hopefully, it's close to what you wanted.

http://jsbin.com/orahuPEh/1/edit

Upvotes: 2

Neha
Neha

Reputation: 1548

Don't give the height of the image div, keep it height:auto, div will take image height. As you mention its responsive image than div will take height as per image height. 

<div style="display: block; height: auto;">

working Demo

Upvotes: 0

SamStar
SamStar

Reputation: 335

If I am understanding your question right, your problem is that your divs are not butting up against each other properly. Is this correct?

Since you are obviously at the point where things aren't necessarily working right anyway, I would start by setting the height of the img's parent div to the actual height of the image. If this does not work use negative margin on either of the divs:

div style="margin-top:-30px;

Hope this helps, let me know if there is anything I can clarify.

Upvotes: 0

Related Questions