Prevent wrapping of text below radio buttons

Question

The best way I could describe what I want is with this picture:

How do I make it so the text aligns with the top text, and not the radio button?

Relevant CSS is as follows:

.basic-grey {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    background: #FFF;
    word-wrap: break-word; 
    padding: 20px 30px 20px 30px;
    font: 12px "Myriad Pro", sans-serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
    border:1px solid #DADADA;
}

}
.basic-grey h1>span {
    display: block;
    font-size: 11px;
}
.basic-grey label {
    display: block;
    margin: 0px 0px 5px;
}
.basic-grey label>span {
    float: left;
    width: 80px;
    text-align: right;
    padding-right: 10px;
    margin-top: 10px;
    color: #888;
}
.basic-grey select {
    background: #FFF url('down-arrow.png') no-repeat right;
    background: #FFF url('down-arrow.png') no-repeat right);
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    width: 72%;
    height: 30px;
}
.basic-grey textarea{
    height:100px;
}
.basic-grey p {
    display: inline ;
}
;}

Markup:

<form name="frm1" action="index4.php" method="POST" class="basic-grey">
    <h3>2.  I have taught the course, several times face to face, that I wish to transform into a blended format.  </h3>
    <input type="radio" name="q2" value="1" /> <p>This statement accurately reflects my experience.</p><br>
    <input type="radio" name="q2" value="2" /> <p>This statement partially reflects my experience (I have taught the course only a few times or once before).</p><br>
    <input type="radio" name="q2" value="3" /> <p>This statement does not reflect my experience (this a new course that I will teach for the first time in a blended format).</p><br>
    <br>
    <input type="submit" name="button" class="button" value="Submit" /> 
</form>

When I try to float the radio button, all the text becomes out of whack.

Tented

please post your markup. – Earp

No, I asked for markup. HTML markup – Earp

This question has been answered here: #7690565 – Empson

@user2198696 and the answer is dirty :) – Picoline

Answer 1

Updated Answer

You could do the above with Flexbox.

Demo

<label>
  <input type="radio">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor beatae odit quo quia hic vitae repellat velit. Iste nam alias dolor maxime repudiandae similique cum et labore, dolorem, tempore voluptas.</p>
</label>

* {
  margin: 0;
  padding: 0;
}

label {
  display: flex;
  flex: 1;
  align-items: flex-start;
}

input[type=radio] {
  margin: 5px;
}

---

Old Answer

It's pretty simple, just turn your label element to display: block; and use margin-left for the label and float your radio button to the left

Demo

Demo 2 (Nothing fancy, just used multiple radio for the demonstration)

input[type=radio] {
    float: left;
}

label {
    margin-left: 30px;
    display: block;
}

Just note that say if you are storing the radio with the labels in an li element, something like

<ul class="radiolist">
    <li>
        <input type="radio"><label>Your text goes here</label>
    </li>
</ul>

So make sure you self clear them by using something like

.radiolist li:after {
    content: "";
    clear: both;
    display: table;
}

That will ensure that you are self clearing all the li elements, and about the :after psuedo, it is well supported in IE8 so nothing to worry about.

Picoline

It works, but now all the text isn't properly aligned with the buttons. They either go over or under. I'll post the CSS in it's entirety, and the HTML. – Tented

@user2280332 you cannot change your HTML? – Picoline

@user2280332 I could easily fix your code but you are using p instead of label so better use my html and css – Picoline

I had to change a few things to get it to work, but it helped so I'll click the checkmark thang. – Tented

An accessibility auditor has insisted that we put the radio inside the label, so the solutions here don't work. Any ideas for solving the exact same problem in that scenario? – Yorgos

This isn't a good solution, because it defeats the purpose of a "label", where you can click the label text and it clicks the radio button. – Foulard

@Foulard that doesn't work out of the box, you need to use id and for attribute respectively jsfiddle.net/SNSpq/144 – Picoline

yeah. this is very outdated. we need newer answer. it ruined my UI so much – Toodleoo

Answer 2

Flexbox solution:

Now that flexbox is widely supported, a simple display: flex; will work like magic.

Just wrap both the input and text with a <label> (so that clicking the text also toggles the input without the need for a for=""), and voila!

.flex-label {
  display: flex;
}
input[type=radio] {
  /* one way to help with spacing */
  margin-right: 12px;
}

<label class="flex-label">
  <input type="radio">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </span>
</label>

If you want to keep the <label> separate, just wrap both in an element for applying the flex fix: https://jsfiddle.net/pn4qyam5/

Writhen

this works great for windows laptops, PCs, but radio buttons are displaying with different sizes on the iPad. hard-coding an input width does not help. any suggestions? – Telescopic

found an answer to above comment: added "flex-shrink:0;" to input radio button css. – Telescopic

Best solution in my opinion. By the way, wrapping the textual content in a span element as it was done in this answer is a good idea: If the wrapping span is omitted, layouting can get messy in situations such as textContent <a>some link</a> more textContent. – Mcphee

Answer 3

This worked for me

input[type=radio] {
  float: left;
  display: block;
  margin-top: 4px;
}

label {
  margin-left: 15px;
  display: block;
}

Blowing

hardcoded pixels gonna give you nightmare – Toodleoo

Answer 4

.basic-grey {
    word-wrap: break-word;
    font: 12px "Myriad Pro",sans-serif;
    color: #888;
    text-shadow: 1px 1px 1px #FFF;
}
.basic-grey p {
    padding-left:20px;
}
.basic-grey input[type=radio] {
    margin-left:-15px;
}

Assuming that your markup is:

<p><input type="radio"/>This statements actually...</p>

Caseation

Answer 5

I love this:

HTML:

<input type="radio" name="vacation" value="Ski Trips"><label>very long label ...</label>

CSS:

input[type="radio"] { 
    position: absolute;
}
input[type="radio"] ~ label { 
    padding-left:1.4em;
    display:inline-block;
}

Orme