Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Forms Web

Well, Heres my problem , my radio buttons dont want to align with the text on the side , so theres button on left and text on the right , they wont align and these buttons are strange because of they look anyways ;d


Hereswhat i did

1 Answer

I think your label text is outside of your label. I'm not sure how they do it on the video but I would say:

<label for ="over_13" class="light">13 or Older<input type="radio" id="over_13" name="user_age"></label>

 <label for="under_13" class="light"> 13 Younger<input type="radio" id="under_13" name="user_age"></label>

Wrapping the input inside the label keeps everything together - I think your styling is making them look a little spaced out right now.

Uh, i tried this code but it doesnt work :/ Im making a copy from what i learned on forms but im trying to learn how to style them and i find it pretty dificult since they dont got any videos on it : / As yesterday the form camed out so i suppose they dont got how to style it .

Well im putting my own code , im not re-styling it because i need to learn how to do any form i like you and well , theres alot of situations/challenges ,

That's cool, this code should work with the right css.

If you want them inline, try creating a class 'inline_radio' and set width: 30% to 0.

.inline_radio {

It works fine for the text but it doesnt work for the radio button. Its somewhere in the middle floating . The text is inline now but the radio buttons are just not there : P

Say whaaaattt. Okay, try removing the 30% on the label also - but just the label for the radio buttons

it doesnt seem to work or im doing something wrong here :


Ah, so you've added two "class" attributes to your labels.

I've got quite close with:


<label for ="over_13" class="light inline_radio">13 or Older<input type="radio" id="over_13" name="user_age"></label>
<label for="under_13" class="light inline_radio"> 13 Younger<input type="radio" id="under_13" name="user_age"></label>

I just removed display:inline and it looks a little better


label.inline_radio {
  width: 50%;
  line-height: auto;

    /*display: inline;*/

This will give you something that is inline - but out of place.

The width:350px on .form-wrap is pushing the radio buttons down:

.form-wrap input {
    width: 350px;
    clear: both;
    margin:5px ;
    background: #9EA39B

you can fix by setting

label.inline_radio > input {
  width: 0

and then add spacing with margins to make it look nice ;)

Thank you but Hmm it doesnt look quite right : /