how to text wrap radio buttons?

[Sharkadder]

ok on my site i have a radio button with some text next to it. Unfortunately the text goes onto the next line. I know for lists you can set the list-style-position property to outside and the text will begin where the text on the previous line does.how do you do it for radio buttons? #leftcontent input {radio-style-position: outside;}that code i tried but it didn't work

[JC5]

I dont mind the colors (right now im using ie7 or 6 idk..) and you need a catchy banner. and make stuff pop out more....need links to work hmm not bad i guess

[Sharkadder]

huh? i asked about how to get text to align for radio button's, not to comment on how the design of my website looks.the website i am designing is different, any chance you could answer my question dude?

[Ingolme]

The text shouldn't go on the next line. What does your mark-up look like?

<input type="radio"> Some text

This should render the text on the same line as the radio button.There's no such thing as "radio-style-position". You can see all the CSS properties here: http://w3schools.com/css/css_reference.asp

[Sharkadder]

yes it does but what if for example i am using a div tag with only limited space within the tag, so the text goes onto the next line. Instead of starting from where the text does on the previous line, it starts from where the radio button is, it just looks odd.I hope you get what i mean now, i need the CSS code to make it align up with the previous lines text, like i have done for the list property.My HTML code isn't the problem, it's the CSS code i need for that div element to make text outside and not inside for radio buttons like i did for lists.My HTML/CSS is as follows:HTML==== <div class="leftcontent"> <img src="satdeal.png"> <p> <form> <input type="radio" name="Type" value="Standard"> Standard <br> <br> <input type="radio" name="Type" value="Standard & Support"> Standard & Support <br> <br> <input type="radio" name="Type" value="Support Only"> Support Only </form> </span> </p> </div>CSS====.leftcontent {float: left;margin: 0px;width: 131px;background: #ffffff;display: block;}

[Ingolme]

In that case, I'd try floating a <div> next to it instead:

<input type="radio"><div style="float: left">Some text</div>

By the way, I don't recommend all those <br> tags. Put all of them in list items and use margin to separate them:

ul.form { padding: 0; margin: 0; }ul.form li {list-style-type: none;margin: 1em 0;}.left { float: left; }

<ul class="form"><li><input type="radio" name="Type" value="Standard"> <div class="left">Standard</div></li><li><input type="radio" name="Type" value="Standard & Support"> <div class="left>Standard & Support</div></li><li><input type="radio" name="Type" value="Support Only"> <div class="left">Support Only</div></li></ul>

[Sharkadder]

your little trick didn't work i'm afraid, infact it made it worse than it originally was. What your way is doing is, having the radio button on one line and the text underneath. Ok yes i would work but i want text on the first line, then when it overflows onto the line underneath it begins from where the first line of text starts off.e.g. (where $ is the radio button itself)without formatting (what i originally had) it will look like this:$ this is an example of radio buttonwith no formattingwith formatting - what i am looking for$ this is an example of a radio button that has been formatted so the next lines text will align with the line above(if above didn't work it's because this forum delete uneeded white spaces at the start of lines)your way$this is an example of a radio button$your way shows the text on the next lineMy CSS and html now looks like this:ul.form { padding: 0; margin: 0; }ul.form li {list-style-position: outside;list-style-type: none;margin: 1em 0;}.left { float: left; } <form> <ul class="form"> <li><input type="radio" name="Type" value="Standard"> <div class="left">Standard</div></li> <li><input type="radio" name="Type" value="Standard & Support"> <div class="left">Standard & Support</div></li> <li><input type="radio" name="Type" value="Support Only"> <div class="left">Support Only</div></li> </ul> </form>hope you now understand, when i first did it with list's i used the list-style-position: outside; property and it worked, now it isn't

[Ingolme]

list-style-position only works for the list marker, which is generated by the browser. You can't apply it to any element.My method shouldn't put the text on the next line if you applied float: left; to the <div> element.

[Sharkadder]

Ok your code isn't working for me, so i have included a screenshot of exactly what is happening:I used exactly the code you said, as you can see the readio buttons are not aligned. The browser i am using is firefox 3.0 and i use kubuntu. I cannot test IE as it's not working properly.What do you think is going on then and how can i correct it?The effect i am looking for is this:h**p://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21156883.htmlthanks, hope somebody can help with some appropiate code, again the code i currently have is as follows:CSS.leftcontent {float: left;margin: 0px;width: 131px;background: #ffffff;display: block;}ul.form li {list-style-position: outside;list-style-type: none;margin: 1em 0;}.left { float: left; list-style-position:outside;}HTML <div class="leftcontent"> <img src="satdeal.png"> <p> <form> <ul class="form"> <li><input type="radio" name="Type" value="Standard"> <div class="left">Standard</div></li> <li><input type="radio" name="Type" value="Standard & Support"> <div class="left">Standard & Support</div></li> <li><input type="radio" name="Type" value="Support Only"> <div class="left">Support Only</div></li> </ul> </form> </p> </div>

[Ingolme]

The text is wrapping because it's too long. Your box simply can't contain the text.You could solve it by not allowing it to wrap. Also, you need to clear the floats.Try adding this to your CSS:.form { padding: 0; }.form li {clear: left;white-space: nowrap;}

[Sharkadder]

still not working, a radio button appears and the text is being displayed on the line underneath. I am wondering if it is infact a firefox issue or it might be my kubuntu but it should work if it worked before for a different list.I can do it without wrapping and it is fine except for the start of a new line doesn't match, i could always cheat and insert some white spaces at the start of the new line although that isn't very practical. So it looks like i may just have to get rid of the wrapping all together as it's messing up like this. What i don't get is, without trying to wrap the text, the text will display next to the radio button and if needed it will overflow onto the next line. When i try to wrap it goes on the line underneath the radio button and doesn't overflow, it just continues.I have now done a few more tests, i removed the radio button code and allowed bullets to be displayed in the list. the text does indeed wrap on the next line, so that is happening is, the text is wrapping itself to the start of the radio button and not the start of the text. I think some white spaces may have to do me, unless somebody has got a solution.

[elementalgrace]

Slightly off topic but why aren't you using a label for your radio button anyway? Although Ingolme's point still remains valid. If the text it too long for the container, whatever that it, then it's just not going to stay on the same line. If you must, maybe try shrinking your text and see if that IS the problem.