CSS problem - gaps between divs

I have designed a layout and i find some gap开发者_如何学编程s in the stacking of divs over each other.

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

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.

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.

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

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.

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