it_is_a_literature it_is_a_literature - 7 months ago 11
HTML Question

Why the box4 can't be close to box1 with the css?

I want box4 and box1 be close to each other ,why there is a gap between them?

I have floated box4 on the left,why it can't lay on the left?





div.box{
width:640px;
height:500px;
margin:0 auto;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:300px;
background-color: yellow;
float:right;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
}

<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box3">box3
</div>
<div class="box4">box4
</div>
</div>
</body>





What i got is as below:

enter image description here

What i want to get is as below:

enter image description here
How to fix it?

As to Leo the lion's answer,two problems remains:

1.Why my css can't make box4 be close to box1 ,which factor result in that?

Please give more explains in detail.

2.In Leo the lion's answer,two lines added:

top:108px;
position:absolute;


I knew what
position:absolute;
mean here ,
top:108px;
here confused me ,why can't set
top:100px;
,the height of box1 is just 100px??

Answer
div.box4 {
   margin-top: -40px;
   width: 250px;
   height: 300px;
   background-color: green;
   float: left;
}

add margin-top: -40px;

Comments