CSS problem - gaps between divs

Question

I have designed a layout and i find some gaps in the stacking of divs over each other.

can some one help me http://uniquedl.com/3closets/about.html

and

Answer 1

in their div .introduction you have an image larger than the div itself, this must be the problem, including the other divs

Answer 2

First gap: your class .introduction is having height of 384px where else class .intro-message (which is a child of .introduction) is having a height of 390px.

Answer 3

You need this in style.css:

img { display: block }

and you need to change the height on .introduction .intro-message to 384px, to match the height of the image on the left.

Doing this solves both problems.

---

As an alternative to img { display: block }, you could instead do: img { vertical-align:bottom }. This also fixes.

See this answer for a good explanation of what's going on here.

@Alohci explains it very nicely.

Answer 4

You have a <div class="clear"></div> in both instances there. I would say that the page is behaving as expected.

Edit: If you use Google Chrome to view this page, you can right click on an area and choose "inspect element". It will provide a window that will display the code as it's rendered by the browser, and on the right there will be another properties window that displays the css being assigned to the elements you're looking at.

Answer 5

Hi for your website :http://uniquedl.com/3closets/about.html just make the style like

.introduction {
    height: 384px;
    overflow: hidden;
    position: relative;
}

Then it will work