CODEWITHSUNDEEP
htmlcss
Tomas.R
Tomas.R

Reputation: 963

one float is on top of another float

All li's are float:left; And 4th li has climbed on the 1st li.

I want the 4th li to be on it's own and not affect the 1st li.

Here's the result http://jsfiddle.net/TomasRR/s9nQ6/6/embedded/result/

Here's the code http://jsfiddle.net/TomasRR/s9nQ6/6/

<ul>
    <li>
        <div class="front">1</div>
        <div class="back">Back</div>
    </li>
    <li>
        <div class="front">2</div>
        <div class="back">Back</div>
    </li>
    <li>
        <div class="front">3</div>
        <div class="back">Back</div>
    </li>
    <li>
        <div class="front">4</div>
        <div class="back">Back</div>
    </li>
</ul>

li {
    height: 150px;
    width: 400px;       
    list-style: none;       
    background: red;        
    float: left;        
    margin-right: 20px;     
    margin-bottom: 50px;
    margin-top: 10px;               
}
.front, .back {
    width: 100%;
    height: 100%;
}
.front {    
    background: gray;

}
.back {
    background: yellow;
}

Upvotes: 0

Views: 44

Answers (1)

user3817362
user3817362

Reputation: 26

It appears that the height value you have set for the lis is smaller than the overall height of your blocks that contain both front and back. When the browser window is made small enough, and the items start to break to a new line, they are going to start 150px down from the last, hence your overlap. You either need to hide the back section or adjust the height of your lis to take the full height of the elements into account. You may also want some space (padding or margin) in between the rows when the break to a new line.

Upvotes: 1

Related Questions