使用float和margin-left创建html布局时出现问题

Question

I have the following HTML code that displays some DIV elements on a page.

 <div style="float: left; width:182px; height:200px; border-style: solid; border-width:1px">Left Column</div> <div style="margin-left: 200px; border-style:solid; border-width:1px"> <div style="float: left; border-style: solid;border-width:1px;">Div1</div> <div style="float: left; border-style: solid;border-width:1px;">Div2</div> <div style="clear:left; border-style: solid;border-width:1px;">Div3</div> <div style="float: left; border-style: solid;border-width:1px;">Div4</div> </div> 

I would like Div3 to be shown just below Div1 and Div2, but instead it is shown where the left column ends, so there is a large space between div1/div2 and div3.

How can I get div3 to be shown just below div1/div2? It is also important the div3 uses the whole available width.

Answer 1

use this may help u

<div style="float: left; width:182px; height:200px; border-style: solid; border-width:1px">Left Column</div>
<div style="margin-left: 200px; border-style:solid; border-width:1px">

  <div style="float: left; border-style: solid;border-width:1px;">Div1</div>
  <div style="border-style: solid;border-width:1px;">Div2</div>
  <div style="border-style: solid;border-width:1px; display:block;">Div3</div>
  <div style="border-style: solid;border-width:1px; display:block">Div4</div>
</div>

Answer 2

 div{ border: 1px solid #000; box-sizing: border-box; } .sidebar{ float: left; width:27%; height: 200px; } .content{ float: left; width: 70%; margin-left: 3%; } .content:after{ content: ''; clear: both; display: block; } 

 <div class="sidebar">Left Column</div> <div class="content"> <div style="float: left; ">Div1</div> <div style="float: left;">Div2</div> <div style="clear:left;">Div3</div> <div style="float: left;">Div4</div> </div> 

https://jsfiddle.net/3sfa0jc1/

Answer 3

You need to be careful with floats, there are for float elements, not to design layout. I recommend that changes floats by displays. Otherwise, I solve your issue with floats.

You can view it running: http://jsfiddle.net/h5o50n41/

The code:

<div style="float: left; width:182px; height:200px; border-style: solid; border-width:1px"> Left Column </div>   
<div style="float:left;margin-left: 200px; border-style:solid; border-width:1px"> 

   <div style="float: left; border-style: solid;border-width:1px;"> Div1 </div>
   <div style="float: left; border-style: solid;border-width:1px;"> Div2 </div>
   <div style="clear:left;float:left; width:100%; border-style: solid;border-width:1px;"> Div3 </div>  
   <div style="float: left; border-style: solid;border-width:1px;"> Div4 </div> 
</div>