CODEWITHSUNDEEP
css
FluxEngine
FluxEngine

Reputation: 13310

Stop divs from overlapping

I have a three images in a row wrapped by a div. A link is in a separate div below the first div.

http://jsfiddle.net/sGmjU/1/

The problem I am having is that when the browser is wide enough, the images are ina horizontal row above the link as they should be.

When the width is smaller than the three images though the link staysright where it was and the images show up in a column over and through the link.

I want the images to stay in a row and have the link stay under the images.

What is the core concept? I have tried several things with no luck.

Upvotes: 5

Views: 19779

Answers (2)

sumit joshi
sumit joshi

Reputation: 95

Give clear: both; to the image div's and remove the width shown below

#images {

margin:auto;
display:block;
vertical-align:middle;
clear: both;

}

Upvotes: 0

Lowkase
Lowkase

Reputation: 5699

Take the hard height value out of #images:

#images {
    width:50%;
    margin:auto;
    display:block;
    vertical-align:middle;
}

The height value was forcing the images inside the div to overflow, and subsequently overflow onto the link div.

Upvotes: 8

Related Questions