div outside the parent div - html

Question

i'm trying to create a page structure, but i have a problem with position of div.
I have 2 div (purple) into a div parent (red). And after parent div, another div (green). I want to have the green div bottom the red one.
But the browser show me the purple div not into the red one (their parent), and so the green div is not under the red and purple divs, but only under the red one.
I make a snippet to show you:
div#form {
background: red;
}
div#search {
background: yellow;
}
div.accostati {
float: left;
margin: 5px;
background: purple;
}
div#test {
background: green;
}
<div id="form">
<p> CERCA GOMME </p>
<div id="label-search" class="accostati">
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
</div>
<div class="accostati">
<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
<select name="marca">
<option value="1">1</option>
</select><br>
<select name="modello">
<option value="2">2</option>
</select> <br>
<input type="submit" value="CERCA">
</form>
</div>
</div>
<div id="test">
riga1 <br>
riga2 <br>
riga3 <br>
</div>
Have you any idea how to show the purple div into the red one, in order to have green div under both purple and red divs...
Thank you!

Answer 1

Add overflow:auto to div#form:
div#form {
background: red;
overflow:auto;
}
div#form {
background: red;
overflow:auto;
}
div#search {
background: yellow;
}
div.accostati {
float: left;
margin: 5px;
background: purple;
}
div#test {
background: green;
}
<div id="form">
<p> CERCA GOMME </p>
<div id="label-search" class="accostati">
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
</div>
<div class="accostati">
<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
<select name="marca">
<option value="1">1</option>
</select><br>
<select name="modello">
<option value="2">2</option>
</select> <br>
<input type="submit" value="CERCA">
</form>
</div>
</div>
<div id="test">
riga1 <br>
riga2 <br>
riga3 <br>
</div>

Answer 2

You can use display: inline-block for both those divs
Like this
div#form {
background: red;
display: inline-block;
}
div.accostati {
display: inline-block;
margin: 5px;
background: purple;
}
div#form {
background: red;
display: inline-block;
}
div#search {
background: yellow;
}
div.accostati {
display: inline-block;
margin: 5px;
background: purple;
}
div#test {
background: green;
}
<div id="form">
<p> CERCA GOMME </p>
<div id="label-search" class="accostati">
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
<p class="select">LABEL-FIELD:</p><br>
</div>
<div class="accostati">
<form name="cercaGommeCasa" action="gommeincasa.php" method="POST">
<select name="marca">
<option value="1">1</option>
</select><br>
<select name="modello">
<option value="2">2</option>
</select> <br>
<input type="submit" value="CERCA">
</form>
</div>
</div>
<div id="test">
riga1 <br>
riga2 <br>
riga3 <br>
</div>