I can’t figure out why I can’t float radio buttons to the left in this pen:
https://codepen.io/El_Escandalo/pen/bGbqNeY
I’ve created 2 sets of radio buttons (just to test different ways of presenting them). In the 2nd set (where I present them via an <ul>), I’m trying to use a selector to float the buttons left.
But the buttons remain to the right of the label What am I doing wrong there?
You are using classes instead of elements.
Should be:
input[type="radio"] {
float: left;
}
You can’t mix floats in the way you want. Float is an alternative now. Back when it was the way it wasn’t mixed with li. you might float an entire menu right or left, but usually not. It seems that on FCC people try and use grid and flexbox and position and float. Pick one technique and use that.
I don’t know, personally, I only use floats for their intended purpose (which they still do well).
However, there are times where using a float can do the job, like in the case of putting the radio button on the left of the label text. I probably wouldn’t do it but it isn’t like making a full-page layout using floats, it’s just on single elements and that can still work out fine I think.
There seems to be a misunderstanding of element orders.
When you say float. Are you trying to make the radio be placed left side of the label?
or do you mean making all the radio button side by side?
If you want to make them all side by side.
In the case of <ul> you have to put the float in the <li> because <li> is the parent of the radio button.
If you put <input> one line after another. It will automatically be left floated because the size of the element box size.
I have tested the attribute selector. It doesn’t recognize input type as a selector method, which is weird, because it works for anchor tags.
It shouldn’t look like that. Do you have an updated Codepen? I don’t see the CSS change on the one you posted.
Sorry I made the change now. I’m using Codepen through my browser so I would think it would always be updated? Here’s the pen. I saved the CSS change, but that is still happening:
I wanted them side by side. I realized I was using a selector for classes instead of elements so I fixed it… But thank you!
It does not look like the image you posted for me. I looked in Chrome and Firefox. What browser are you using? Are you on a PC or a mobile device?
I see that as well when I run it on a VM using lambdatest.
Do see it here:
macOS Mojave
Chrome 73
Do not see it here:
macOS Sierra
Safari 10.1
Does it happen with Safari and Firefox as well on your system?
I do not have enough free usage time on lambdatest to do any testing and I don’t have enough hands-on experience with Mac OS and Chrome to give you an answer right now, but I’m tempted to just say don’t use floats. Without being able to test it is kind of hard for me to come up with a solution.
Thanks for checking into it. I’m not too worried about it. Honestly I’m probably getting too caught up in the micro-details right now anyway, still trying to learn HTML! From some of the other answers ^^^, it almost sounds like floats are an older way of position things?
They are. And they were not made to do layout, they are really just made to float text around an element. Check out the example on MDN.
Just a few questions to satisfy my curiosity, if you can be bothered.
Does removing the radio class from the first <li> do anything?
Does adding the radio class back to all the <li>s like it is in the original example project do anything?
How does the original example project look on your system?
Thanks. To answer your questions:
-removing the radio class from the first <li> didn’t do anything.
-adding the radio classes back to all the <li> didn’t do anything either.
-this is basically how the original example looks (I add borders to <div> sections to help me visualize them)
Maybe it could be something in the CSS. I’ve copied some of the examples CSS but not most of it. I’ve been messing around with some CSS elements but don’t want to go too deep- I just think there’s no point in tearing my hair out about styling right now, when I barely understand the HTML elements…
Sorry I didn’t see your reply. It is often better to use the reply button or use @username that way people are notified when you reply to them, just FYI.
Anyway, thank you for answering my questions. It looks like a bug to me, but that doesn’t matter. And you are right, don’t get too bogged down in specifics. When first starting out it is much too easy to get pulled into rabbit holes and trying to understand everything in detail.
Based on some of your threads I’d say you have a good eye for detail and that will serve you well. Not everyone just starting out will find bugs in the example code (they have been there for a long time) and you have now done so more than once. So keep up the great work. 
Thanks! I’m working on it…
BTW one quick “housekeeping” question- what is the etiquette with the “solution” button? Sometimes I’ve asked questions and the first reply was helpful, but then another reply was more helpful… So I don’t want to hit “solution” too soon (because then maybe no one else will respond?). But I also don’t want to annoy people. But maybe people aren’t that worried about it?
(also I thought it was replying to you automatically as your name is above the thread, but I guess I will @lasjorg just to be sure in the future!)
It is totally up to you if you even want to use the solution feature. There should be no pressure to use it.
It may be useful when you feel that a thread has run its course and you would like to not receive any more replies or just to mark it as resolved. If you want to mark a thread as resolved you can even just give it to yourself.
Not sure what happened. I didn’t get a notification so I just wanted to make sure you know how to get peoples attention.
