Weird bug with border:0 / none css - html

Question

i have a weird bug with my css
#box1 {
border:2px solid #CC9933;
padding:5px;
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px ;
margin-bottom: 10px;
width: auto;
}
#box1 label {
background-color: black;
color:white;
float: left;
margin-left: 1px;
}
#box1 span {
display: block;
overflow: hidden;
}
#box1 span input {
width: 100%;
border:none;
border-bottom:solid 1px #000;
outline:none;
}
<div id="box1">
<form>
<div>
<label> Nom de la société </label>
<span><input type="text" value=""></span>
</div>
<div>
<label> Adresse </label>
<span><input type="text" value=""></span>
</div>
</form>
</div>
I won't show all the HTML because it is the same structure.
The thing is that in my web browser it looks like this :
However, this is how it should looks like :
(this is the same code !)
http://jsfiddle.net/8vsyxtys/

Answer 1

It's most likely the float:left.
Try adding a clear div after each:
css would be: .clear { clear:both; height: 1px; }
#box1 {
border:2px solid #CC9933;
padding:5px;
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px ;
margin-bottom: 10px;
width: auto;
}
#box1 label {
background-color: black;
color:white;
float: left;
margin-left: 1px;
}
#box1 span {
display: block;
overflow: hidden;
}
#box1 span input {
width: 100%;
border:none;
border-bottom:solid 1px #000;
outline:none;
}
.clear {
clear: both;
height: 1px;
}
<div id="box1">
<form>
<div>
<label> Nom de la société </label>
<span><input type="text" value=""></span>
</div>
<div class="clear"> </div>
<div>
<label> Adresse </label>
<span><input type="text" value=""></span>
</div>
</form>
</div>