text wrapping incorrectly for radio button

Question

I have 2 html radio buttons (separated by <br /> tags) where the text is wrapping under the radio button instead of aligning with the left indent (due to the size it's containing div). The text wrapping is not the problem, the problem is that it is wrapping incorrectly under the radio button itself, instead of aligning with text in the line above it. I'm supposing someone styled the input tag somewhere in the cascade. I haven't done an exhaustive search of all the styles attached to this page, but shouldnt the text just automatically wrap correctly, like a bullet list?

And if not, how would i go about fixing this? Do i need to insert a <br /> tag where I want the lines to break so they will be properly aligned?

Thanks!

Imbed

Can you add a jsFiddle of what you have? Or just add your current HTML? It would answer a few questions I have, for example: are you using <label>? – Clathrate

Here's a solution I will try: link I didn't want to have to write a bunch rules, just modify what I had...but it is a solution. If someone has a better one, please post. Thanks. – Imbed

thirtydot, I'm not using a label. I'm not reeeeaal sure how to use that yet. will google. but i have seen other posts using that. what exactly does <label> do? – Imbed

<label> is used in a form to provide a label for an input element like a textbox or a radio button. So if you have an input where you want the user to enter their first name into a textbox you would have a label with 'First Name' as the text between the opening and closing tags and put the ID of the input box you are referring to in the 'for' attribute. – Bairam

thanks for explaining that, Eganr. how does that help to align the text? I don't see that you are using <label>in your solution – Imbed

Answer 1

First of all, the use of a <br /> is generally not recommended, it's a lot better to try and use the margin CSS property to create space between elements.

It's also best in this situation to use CSS to do what you want to do. This is because by default those elements won't have this kind of behaviour.

In this case you would want something that looks like this:

<div style="width:300px">
    <input type="radio" class="radioLeft" />
    <div class="textBlock">
        Some text that is too long to fit inline and must be broken 
        up over multiple   lines.Some text that is too long to fit inline 
        and must be broken up over multiple lines.Some text that is too 
        long to fit inline and must be broken up over multiple lines.
    </div>
    <div style="clear:both;"></div> //this is important for repeated inputs
</div>

And then your CSS would look like this:

.radioLeft
{
   float: left;
}

.textBlock
{
    float: left;
    width: 80%; //Adjust this value to fit
}

Bairam

Eganr, the text is wrapping under the radio button. I have it placed in a div width:300px. But that shouldn't matter, right, since the .textblock class has a smaller width? I added a jsfiddle (above) of my code. – Imbed

For some reason I can't see jsfiddle at work can you paste the code or use an alternative. The one thing I forgot is the closing quote on the radioLeft class. I've updated my answer a bit too. Here is my CSSDesk live example: cssdesk.com/FwpGr – Bairam

Thanks, Eganr. I just tried looking at the jsfiddle and i'm able to see it. your solution looks great, very clean. i wound up doing something a little different, but will try yours going forward. .f_course .award form label { color: #000000; font-size: 11px; line-height: 1.5; position: relative; margin-left: 30px; display: block; } .f_course .award form input { float: left; display: block; – Imbed

Be nice to your users and use <label for="inputID" class="textBlock"> rather than a generic div. This will allow screenreader users to associate the info with the input and give mouse users a nice big click target (they can click the label rather than having to hit the small radio button.) – Ordinand

I've answered a similar question here https://mcmap.net/q/408404/-prevent-wrapping-of-text-below-radio-buttons/1542290 and found that your solution is not that optimum, should consider editing – Vainglory

Answer 2

You can simply use CSS to force the text to wrap correctly. I'm assuming that you have a <span> tag around the text and so you can use the following to adjust its position:

span {
  display: block;
  margin-top: -16px;
  margin-left: 28px;
}

Hope that this helps! Tomer

Enfeoff

Answer 3

Answer for 2015:
Since none of the other soultions worked for me, here's how I do it:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Radiobutton labels aligned</title>
<style type="text/css">
    div { display:table-row; }
    div span { display:table-cell; vertical-align:middle; } /* You can omit the entire span if you don't want the radiobutton vertically centered */
    div label { display:table-cell; }   
</style>
</head>
<body>
<form>
<div>
    <span><input type="radio" id="a"></span>
    <label for="a">First button's label<br>First button's label</label>
</div>
<div>
    <span><input type="radio" id="b"></span>
    <label for="b">Second button's label</label>
</div>
<input type="radio" id="c"><label for="c">For comparison: Standard-Label</label>
</form>
</body>
</html>

See http://jsfiddle.net/8jzss08p/
Works in: Firefox 41, Chrome 45, Internet Explorer 11

Weigela

Using <br> to break the line? Isn't that crude? The text should wrap and then indent. – Injection

Answer 4

Sorry for answering this so late, I just came across this post, here's another solution :

p { margin-left: 20px; text-indent: -20px; }

Wedge