Why on Earth is it doing this!?

Hey guys! Still working on building my Web Survey form for FreeCodeCamps projects (going slow because I want to understand what I am doing and how I am doing it). Anyway, I am wanting to line my radio buttons on top of each other, and I want the check boxes on the right side of the label - So I used the “float” tag in CSS. But now they are drifting oddly down and to the left. Any idea why this is happening?

Link to Code: https://codepen.io/brett-dykes/pen/LovPve

Edit: I meant “down and to the left” - not right

Edit: I meant checkboxes instead of radio buttonsweirdcopesnip

<div class="labels">
   <label id="radios" for="radiobuttons"><strong>Do you think I should invest in a bootcamp?</strong>
   </label>
   <input id="radioinput" type="radio" name="bootcamp" value="yes">Yes
   <input id="radioinput" type="radio" name="bootcamp" value="no">No
   <input id="radioinput" type="radio" name="bootcamp" value="Indifferent">Indifferent
</div>

Your question:
How do I make my radio buttons on the right side? ( after the text ).

Answer:
You’re current making a radio button 1st then making text 2nd. So you can do this one of two ways using flex-blox.

<div class="flex"><span>Yes</span><input type="radio"></div>
OR
<div class="flex-reverse"><input type="radio"><span>Yes</span></div>
.flex {
    display: flex;
    align-items: center;
}

.flex-reverse {
    display: flex;
    flex-flow: row-reverse;
    align-items: center;
}

@Brett-dykes I see the following which contains a for attribute which references “radiobuttons”, but I do not see an element with id=“radiobuttons”.

<label id="radios" for="radiobuttons"><strong>Do you think I should invest in a bootcamp?</strong></label>

Also, each one of your input elements with type=“radio” should have a corresponding label and each of the input elements should have a unique id in which you will reference it with a corresponding label for attribute value. This helps those using screen-readers to easily understand which input goes with which response (i.e. Yes, No, Indifferent).

I recommend removing the surrounding label from the Question and instead maybe surround it with a p element like below:

<p class="question">Do you think I should invest in a bootcamp?</p>

You would then add a question class selector in your CSS and style as you wish.

Also, an example of the first radio input element with a corresponding label could look like:

<input id="bootcamp-yes" type="radio" name="bootcamp" value="yes">
<label for="bootcamp-yes">Yes</label>

OR

<label for="bootcamp-yes">
  <input id="bootcamp-yes" type="radio" name="bootcamp" value="yes">Yes
</label>

You may have to adjust your CSS to keep the same look and feel you currently have.

Hi, thanks for your response! I’m actually referring to the radio buttons under this which I ask which language to focus on!

Will all this fix the issue of the radio buttons that are positioning oddly for the question “which language I should focus on”?

You said radio buttons., but you meant checkboxes. If someone doesn’t give you answer by end of the day., I’ll post. I’m on mobile now., so I can’t see what you have,. but the idea is still the same.

If you’re using label for… then your input should be inside your label.

Ok, well I fixed that, and nothing changed. Why does it NEED to be that way?

Ok I think I did everything you said, nothing really changed in the way of physical appearance. Is this what they mean when they say “semantic”?

You rock! Thank you. So “why” did the floats cause them to position so oddly?