Member Avatar for Violet_82

Hi all, I hope somebody can help me with this really annoying issue. Basically I have a some radio buttons and some text inside a label. This is in a small container and when the line of text breaks and goes to the other line, I want it to be below the text and not the radion button, so in short to increase the indentation.
I have spent a few hours on this but I can't get it right. I have tried an awful lot of combinations (and things suggested on stackoverflow too) but for the life of me I couldn't get it to work. Here's the code and 2534aeb83c2b7f8d368ca9c29fe914d8 a screenshot of how the layout looks like at the moment.
This is the relevant html:

    <div class="myform">
            <div class="column1">
                <p>lorem ipsum?</p>
            </div>
            <div class="column2">
                <span>
                    <input id="question0" name="question" value="Yes" type="radio"><label for="question0">Yes</label>
                    <br><input id="question1" name="question" value="latin 1" type="radio"><label for="question1">No, onsectetur adipiscing elit. Inte</label>
                    <br><input id="question2" name="question" value="latin 2" type="radio"><label for="question2">onsectetur adipiscing elit. Inteonsectetur adipiscing elit. Inte</label>
                    <br><input id="question3" name="question" value="latin 3" type="radio"><label for="question3">onsectetur adipiscing elit. Inte adipiscing elit </label>
                </span>
            </div>
        </div>

And css:

/*radio buttons*/
.column1{
    border:1px solid transparent;
    width:26.1437908496732%; /*200/765*/
    float:left; 
}

.column2{
    border:3px solid magenta;
    width:249px;
    float:left;
    font-size: 0.875em;
    padding:0 20px 0;
}
.column2 input[type="radio"]{
    margin-top: 20px;   
}
/* .column2 span label{
    display:inline;
} */
.column2 select, .column2 input{
    margin-top:20px;
}
.column2.noWidth{
    width:auto;
    /* margin-top:20px; */
}

/*radio buttons*/

Now, you might say that the code is a bit odd, especially what is that span doing there? The thing is the content is generated by a cms so ideally if possible I shouldn't really change the structure, but use css to style it and add some classes/ids if necessary.

The last things I tried:
-float the input to the left but it messes everything up.
-text-indent: no joy
Does anybody have a solution that works and does it cross-browser?
thanks

  • 2 Contributors
  • 3 Replies
  • 5K Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

Hello Violet,

Try this code, looks like it resolves your concerns..

dfd5f3ec69b3d5d7e0ed38174e44c5ba

<!DOCTYPE html>
<html>
<head>
<style>
.column1{
    border:1px solid transparent;
    width:26.1437908496732%; /*200/765*/
    float:left; 
}
.column2{
    border:3px solid magenta;
    width:249px;
    float:left;
    font-size: 0.875em;
    padding:0 20px 0;
}
.column2 input[type="radio"] {    
      float: left;
 }

.column2 span label{ 
      margin-left: 25px;
      display: block;
 }
</style>
</head>
<body>
<div class="myform">
    <div class="column1">
        <p>lorem ipsum?</p>
    </div>
    <div class="column2">
        <span>
            <input id="question0" name="question" value="Yes" type="radio"><label for="question0">Yes</label>
            <br /><input id="question1" name="question" value="latin 1" type="radio"><label for="question1">No, onsectetur adipiscing elit. Inte</label>
            <br /><input id="question2" name="question" value="latin 2" type="radio"><label for="question2">onsectetur adipiscing elit. Inteonsectetur adipiscing elit. Inte</label>
            <br /><input id="question3" name="question" value="latin 3" type="radio"><label for="question3">onsectetur adipiscing elit. Inte adipiscing elit </label>
        </span>
    </div>
</div>
</body>
</html>
Member Avatar for Violet_82

ah yes, it does! thanks JorgeM, I hope you don't mind if I ask you a bit more about that. You seem to have used a combination of float, and left margin. My mistake in one of my attempts was to leave the top margin in there and that didn't work. Is the value you gav to the left margin arbitrary? So as long as I give the input a left float and the label a left margin and display as block it will work?
thanks

Member Avatar for JorgeM

Is the value you gav to the left margin arbitrary?

So, the purpose of the margin is to "clear" (for the lack of a better term) the input element. Its about twenty something pixels wide, so if you use a value less than 20ish, the wrapped text will be shown under the input element.

Another option is to have a margin-bottom applied to the input element. Either case, this approach is to simply prevent the text from showing under the input element.

Its probably not the best approach but its the only solution I've used in the past that has worked for me. I havent figured out a better way as of yet.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.