Placing form elements on new lines without <br> - html

Question

I'm trying to create a form to use for my work, I guess my question is more of a why does this happen.
<div class="checkbox">
<input type="radio" name="transport_method" >Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method" >Day Trip
</div>
my css class of "checkbox" looks like this
.checkbox {
float: left;
display: inline;
}
now my code at the next element
<div>First name:<br>
<input type="text" name="firstname"><br>
</div><br><br><br>
I have to add 3 <br>'s to get the "First name:" to be on a new line. I started with only 2 radio buttons and then I only needed 2 <br>'s. Is there a way to format my css to not need any <br>'s?
I think I need the <br>'s (correct me if I'm wrong) due to the fact that html file is reading the radio buttons as new lines and displaying them on one line, therefore the <br>'s fix that issue, but I don't like using them nor do I think it is semantically correct.

Answer 1

Let's start with a nicely marked up form
The form elements
The radio buttons can be wrapped in a <fieldset> element
The labels can all be marked up with <label> elements. The for attribute links to its input via the matching id attribute. One benefit of this is that users can click/touch on the label.
That gives us this:
<form>
<fieldset class="checkbox">
<input type="radio" name="transport_method" id="delivery">
<label for="delivery">Delivery</label>
<input type="radio" name="transport_method" id="pick-up">
<label for="pick-up">Store Pick-Up</label>
<input type="radio" name="transport_method" id="day-trip">
<label for="day-trip">Day Trip</label>
</fieldset>
<fieldset class="names">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</fieldset>
</form>
Bring each text input onto a new line
The default display value for inputs is display: inline which brings them all onto one line. Use display: block on text inputs to knock them down:
input[type=text] {
display: block;
}
We want the radio buttons to remain on the one line, so they can be left at their default display: inline. More information on display.
Full example
Bring it all together with a little bit more CSS:
input[type=text] {
display: block;
margin: 5px 0;
}
input[type=radio] + label {
margin-right: 10px;
}
label,
input[type=radio] {
cursor: pointer;
}
fieldset {
border: none;
}
form {
background: #FFF9C4;
width: 500px;
font-family: sans-serif;
}
<form>
<fieldset class="checkbox">
<input type="radio" name="transport_method" id="delivery">
<label for="delivery">Delivery</label>
<input type="radio" name="transport_method" id="pick-up">
<label for="pick-up">Store Pick-Up</label>
<input type="radio" name="transport_method" id="day-trip">
<label for="day-trip">Day Trip</label>
</fieldset>
<fieldset class="names">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</fieldset>
</form>

Answer 2

Try like this: Demo
<div class="checkbox">
<input type="radio" name="transport_method">Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method">Day Trip</div>
<div class="clear"></div>
<div>First name:
<input type="text" name="firstname">
</div>
.clear{clear:both} instead of <br/>
EDIT: If you dont want to create new class you can use like this too :
Updated dmo
.checkbox::after {
display:block;
clear:both;
content:"";
}

Answer 3

<div class="checkbox">
<input type="radio" name="transport_method" >Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method" >Day Trip
</div>
<div class="clear"></div>
<div>
First name:
<br>
<input type="text" name="firstname"><br>
</div>
<div class="clear"></div>
in css
.clear{
clear:both
}

Answer 4

It's as simple as this:
.checkbox{display:block}
And if you mean to have those checbox inputs floated to left, then use
.checkbox input{display:inline-block}
And there you go, no floats, no br tags, nothing weird

Answer 5

Using the new class amit made
use .clear{clear:both} instead of
on the following element, in my case
<div >First name:<br>
<input type="text" name="firstname"><br>
</div>
turned into
<div class="clear">First name:<br>
<input type="text" name="firstname"><br>
</div>