why the margin top doesn't work?

Question

<div class="right">
<div class="category-nav">
        <h2>test</h2>
    <ul class="item-list">
     <li><a href=#">example</a></li>
    <li><a href=#">example</a></li>
    <li><a href=#">example</a></li>
    <li><a href=#">example</a></li>
    <li><a href=#">example</a></li>
    </ul>
    </div>

<div class="list-content-img"><img src="img_148.jpg" /></div>

the style:

.right{
float: right;
}
.category-nav {
    border: 1px solid #92D5ED;
    float: right;
    padding: 1px;
    width: 316px;
}
.category-nav ul.item-list {
    float: right;
    margin-bottom: 8px;
    overflow: hidden;
}
.list-content-img {
    height: 148px;
    margin-top: 10px;
    width: 320px;
}

why the margin-top: 10px in the list-content-img doesn't work? what's the better way to layout the html structure and do the css? thank you

Answer 1

First of all: You missed a for first div. If I suppose you close the first div and the end of all elements, you have to add the position:absolute; to .list-content-img and set the margin-top : 10px; for .category-nav ul.item-list

 .right
        {
            float: right;
        }
        .category-nav
        {
            border: 1px solid #92D5ED;
            float: right;
            padding: 1px;
            width: 316px;
        }
        .category-nav ul.item-list
        {
            margin-top: 10px;
            float: right;
            margin-bottom: 8px;
            overflow: hidden;
        }
        div.list-content-img
        {

           position : absolute;
            margin-top: 250px;
            width: 320px;
            background-color:Gray;
        }


<div class="right">
        <div class="category-nav">
            <h2>
                test</h2>
            <ul class="item-list">
                <li><a href="#">example</a></li>
                <li><a href="#">example</a></li>
                <li><a href="#">example</a></li>
                <li><a href="#">example</a></li>
                <li><a href="#">example</a></li>
            </ul>
        </div>
        <div class="list-content-img">
            <img src="img_148.jpg" /></div>

Answer 2

On category-nav you have float:right; on list-content-img no float is specified.

float:none : The element is not floated, and will be displayed just where it occurs in the text. This is default.

if you add float:right to list-content-img your margin works :

http://jsfiddle.net/8vRqH/1/

Answer 3

In between div category-nav and list-content-img create a empty div and give it property clear:both to clear the floats.

Here is the fiddle http://jsfiddle.net/BNmwz/