0
 <!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>

 <html>

<div class="container">
    <div id="block1"></div>
    <div id="block2"></div>
    <div id="block3"></div>
    <div id="block4"></div>
    <div id="block5"></div>
    <div id="block6"></div>
</div>



 </html>

css

body
{
    margin:0px;
    padding:0px;
}

.container
{
    //height:300px;
    width: 600px;
    margin-left:auto;
    margin-right:auto;
    background-color: #C0C;
}

#block1
{
    height:100px;
    width:200px;
    float:left;
    background-color:#0c0;
}
#block2
{
    height:100px;
    width:300px;
    float:left;
    background-color:#cc0;
}
#block3
{
    height:100px;
    width:100px;
    clear:both;
    float:left;
    background-color:#0cc;
}
#block4
{
    height:100px;
    width:500px;
    background-color:#AF0;
    float:left;
}

#block5
{
    height:100px;
    width:500px;
    float:left;
    background-color:#BBB;
}

#block5
{
    height:200px;
    width:100px;
    float:left;
    background-color:#ADD;
}

Here I have mentioned clear:both for block3. So I was supposing even if I mention float:left it makes no impact. How does block4 comes in to the remaining right space to block3? Isn't in conflict with clear:both of block3 right?

braX
  • 11,506
  • 5
  • 20
  • 33
Sreeraj Chundayil
  • 5,548
  • 3
  • 29
  • 68

2 Answers2

1

That's not what clear does. Putting clear:both on an element means that the element can't be alongside any floated element that precedes it. It doesn't stop following elements from being alongside it.

Alohci
  • 78,296
  • 16
  • 112
  • 156
0

You have one closing div tag too many, and your opening HTML tag should be above the head section. Maybe that's why you see the weird behaviour.

Jeroen Dragt
  • 76
  • 2
  • 5