Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can force a div to the next row

Tags:

html

css

In the layout below, I would like div1 and div2 to in the same row, but move div3 in next row (below div1). Thanks in advance.

<html>
 <body>
<div style="width:50%;">
    <div id="div1" style="float:left; 
                                  background-color:red; 
                                  vertical-align: bottom;">
        <label> This is my label</label><br>
        <input  type ="text">
    </div>
    <div id="div2" style="padding-left:10px;
                                  padding-right:0px;
                                  float:left; 
                                  background-color:green;  
                                  vertical-align: bottom;">
        <label> &nbsp;</label><br>
        <button id="btn" >My button</button>
    </div>
    <div id="div3" style="background-color:yellow;">This is error</div>
</div>
</body>

like image 825
Rocky Avatar asked Aug 11 '12 14:08

Rocky


1 Answers

Use <br style="clear: both;">

<html>
 <body>
<div style="width:50%;">
    <div id="div1" style="float:left; background-color:red; vertical-align: bottom;">
        <label> This is my label</label><br>
        <input  type ="text">
    </div>
    <div id="div2" style="padding-left:10px;padding-right:0px;float:left; background-color:green;  vertical-align: bottom;">
        <label> &nbsp;</label><br>
        <button id="btn" >My button</button>
    </div>

    <br style="clear: both;"> 

    <div id="div3" style="background-color:yellow; float:none" >This is error</div>
</div>
</body>​​​​​​

jsFiddle

like image 104
Draex_ Avatar answered Oct 13 '22 12:10

Draex_