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> </label><br>
<button id="btn" >My button</button>
</div>
<div id="div3" style="background-color:yellow;">This is error</div>
</div>
</body>
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> </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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With