CODEWITHSUNDEEP
css
Pavel
Pavel

Reputation: 1288

CSS - two divs are on top of each other instead of two separate divs

Why content 3 and content 4 are not two separate divs? How can I fix it only with css? I would like the first red to be bellow the green ones and the second red to be bellow the first red.

JSFIDDLE - http://jsfiddle.net/LsgsE/

HTML

<div class="left">TODO write content1</div>
<div class="left">TODO write content2</div>
<div >TODO write content3</div>
<div>TODO write content4</div>

CSS

div {
width: 200px;
height: 200px;
background-color: red;
}
div:after {
clear: both;
display: block;
content: "";
height: 0px;
}
div.left {
float: left;
background-color: green;
}

Upvotes: 0

Views: 98

Answers (3)

Pirata21
Pirata21

Reputation: 449

Try wit this:

div {
width: 200px;
height: 200px;
background-color: red;
clear: both;
}

div.left {
float: left;
background-color: green; 
clear: none;
}

Upvotes: 1

thiout_p
thiout_p

Reputation: 825

You can solve it by adding a wrapper to your divs:

<div id="upper_block">
    <div class="left">TODO write content1</div>
    <div class="right">TODO write content2</div>
    <div class="left">TODO write content3</div>
    <div class="right">TODO write content4</div>
</div>

And set new rules in your css:

    #upper_block {
      width: 400px;
    }
    div {
     width: 200px;
     height: 200px;
    }
    div.right {
     float: right;
     background-color: green;
    }
    div.left{
     float: left;
     background-color: blue;
    }

Upvotes: 0

sn1ckers
sn1ckers

Reputation: 103

Remove height:0px and then they will not be overlapping.

Upvotes: 0

Related Questions