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

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/