How to make the textarea label display correctly [duplicate]

Multi tool use
Multi tool use





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0
















This question already has an answer here:




  • What methods of ‘clearfix’ can I use?

    28 answers



  • HTML radio buttons allowing multiple selections

    6 answers




I created a responsive form which changes to two columns when the screen size is resized. It mostly works the way I want it to.



However the label for textarea keeps showing incorrectly. I want it to display on a new line, but it keeps showing in the area of radio buttons.



There is also an issue with radio buttons where both can be selected at the same time. I have been trying to figure out what I did wrong but I can't find a solution.



Here is my code on jsfiddle.






/* CSS */

.myForm {
padding: 40px 20px;
}

.myForm h2,
.myForm p {
text-align: center;
padding: 0 10px;
}

.myForm h2 {
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
}

.myForm p {
margin-bottom: 20px;
font-size: 12px;
}

.myForm label {
font-size: 14px;
}

form input {
border: 1px solid #a9a9a9;
border-radius: 3px;
height: 25px;
width: 96%;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}

.label,
.radio input[type="radio"] {
display: inline;
float: left;
width: auto;
margin: 10px 0;
padding: 0 10px;
}

input[type="radio"],
input.radio {
vertical-align: text-top;
width: 13px;
height: 13px;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
top: -8px;
right: 5px;
}

.msg textarea {
width: 96%;
border: 1px solid #a9a9a9;
border-radius: 3px;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}

form button {
background-color: #a9a9a9;
color: #fff;
width: 100%;
text-transform: uppercase;
padding: 10px;
border: none;
border-radius: 3px;
}

@media only screen and (min-width: 768px) {
/*Left form column*/
.left {
display: block;
float: left;
width: 48%;
}
/*Right form column*/
.right {
display: block;
float: right;
width: 48%;
}
.label,
.radio input[type="radio"] {
padding-right: 30px;
padding-left: 30px;
}
}

<!-- HTML -->
<form class="myForm">
<h2>Lorem ipsum</h2>
<p>text</p>
<div class="fields">
<label class="left">First Name
<input type="text" name="other"></label>
<label class="right">Last Name
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<div class="radio right">
<label>Some text</label><br>
<label class="label">
<input type="radio" name="phone" value="phone">Phone</label>
<label class="label close">
<input type="radio" name="email" value="email">Email</label>
</div>
<div class="msg">
<label>Message</label>
<textarea rows="5"></textarea>
</div>
</div>
<button type="button" name="button">Send</button>
</form>












share|improve this question















marked as duplicate by Pete css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 '18 at 11:24


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • For select one radio button you have to give same name for their attributes.

    – Shubham Baranwal
    Nov 22 '18 at 11:21











  • Oh! Of course, how did I miss that, thank you!

    – daydreamer
    Nov 22 '18 at 11:23











  • Your updated JSFiddle

    – Shubham Baranwal
    Nov 22 '18 at 11:25


















0
















This question already has an answer here:




  • What methods of ‘clearfix’ can I use?

    28 answers



  • HTML radio buttons allowing multiple selections

    6 answers




I created a responsive form which changes to two columns when the screen size is resized. It mostly works the way I want it to.



However the label for textarea keeps showing incorrectly. I want it to display on a new line, but it keeps showing in the area of radio buttons.



There is also an issue with radio buttons where both can be selected at the same time. I have been trying to figure out what I did wrong but I can't find a solution.



Here is my code on jsfiddle.






/* CSS */

.myForm {
padding: 40px 20px;
}

.myForm h2,
.myForm p {
text-align: center;
padding: 0 10px;
}

.myForm h2 {
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
}

.myForm p {
margin-bottom: 20px;
font-size: 12px;
}

.myForm label {
font-size: 14px;
}

form input {
border: 1px solid #a9a9a9;
border-radius: 3px;
height: 25px;
width: 96%;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}

.label,
.radio input[type="radio"] {
display: inline;
float: left;
width: auto;
margin: 10px 0;
padding: 0 10px;
}

input[type="radio"],
input.radio {
vertical-align: text-top;
width: 13px;
height: 13px;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
top: -8px;
right: 5px;
}

.msg textarea {
width: 96%;
border: 1px solid #a9a9a9;
border-radius: 3px;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}

form button {
background-color: #a9a9a9;
color: #fff;
width: 100%;
text-transform: uppercase;
padding: 10px;
border: none;
border-radius: 3px;
}

@media only screen and (min-width: 768px) {
/*Left form column*/
.left {
display: block;
float: left;
width: 48%;
}
/*Right form column*/
.right {
display: block;
float: right;
width: 48%;
}
.label,
.radio input[type="radio"] {
padding-right: 30px;
padding-left: 30px;
}
}

<!-- HTML -->
<form class="myForm">
<h2>Lorem ipsum</h2>
<p>text</p>
<div class="fields">
<label class="left">First Name
<input type="text" name="other"></label>
<label class="right">Last Name
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<div class="radio right">
<label>Some text</label><br>
<label class="label">
<input type="radio" name="phone" value="phone">Phone</label>
<label class="label close">
<input type="radio" name="email" value="email">Email</label>
</div>
<div class="msg">
<label>Message</label>
<textarea rows="5"></textarea>
</div>
</div>
<button type="button" name="button">Send</button>
</form>












share|improve this question















marked as duplicate by Pete css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 '18 at 11:24


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • For select one radio button you have to give same name for their attributes.

    – Shubham Baranwal
    Nov 22 '18 at 11:21











  • Oh! Of course, how did I miss that, thank you!

    – daydreamer
    Nov 22 '18 at 11:23











  • Your updated JSFiddle

    – Shubham Baranwal
    Nov 22 '18 at 11:25














0












0








0









This question already has an answer here:




  • What methods of ‘clearfix’ can I use?

    28 answers



  • HTML radio buttons allowing multiple selections

    6 answers




I created a responsive form which changes to two columns when the screen size is resized. It mostly works the way I want it to.



However the label for textarea keeps showing incorrectly. I want it to display on a new line, but it keeps showing in the area of radio buttons.



There is also an issue with radio buttons where both can be selected at the same time. I have been trying to figure out what I did wrong but I can't find a solution.



Here is my code on jsfiddle.






/* CSS */

.myForm {
padding: 40px 20px;
}

.myForm h2,
.myForm p {
text-align: center;
padding: 0 10px;
}

.myForm h2 {
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
}

.myForm p {
margin-bottom: 20px;
font-size: 12px;
}

.myForm label {
font-size: 14px;
}

form input {
border: 1px solid #a9a9a9;
border-radius: 3px;
height: 25px;
width: 96%;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}

.label,
.radio input[type="radio"] {
display: inline;
float: left;
width: auto;
margin: 10px 0;
padding: 0 10px;
}

input[type="radio"],
input.radio {
vertical-align: text-top;
width: 13px;
height: 13px;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
top: -8px;
right: 5px;
}

.msg textarea {
width: 96%;
border: 1px solid #a9a9a9;
border-radius: 3px;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}

form button {
background-color: #a9a9a9;
color: #fff;
width: 100%;
text-transform: uppercase;
padding: 10px;
border: none;
border-radius: 3px;
}

@media only screen and (min-width: 768px) {
/*Left form column*/
.left {
display: block;
float: left;
width: 48%;
}
/*Right form column*/
.right {
display: block;
float: right;
width: 48%;
}
.label,
.radio input[type="radio"] {
padding-right: 30px;
padding-left: 30px;
}
}

<!-- HTML -->
<form class="myForm">
<h2>Lorem ipsum</h2>
<p>text</p>
<div class="fields">
<label class="left">First Name
<input type="text" name="other"></label>
<label class="right">Last Name
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<div class="radio right">
<label>Some text</label><br>
<label class="label">
<input type="radio" name="phone" value="phone">Phone</label>
<label class="label close">
<input type="radio" name="email" value="email">Email</label>
</div>
<div class="msg">
<label>Message</label>
<textarea rows="5"></textarea>
</div>
</div>
<button type="button" name="button">Send</button>
</form>












share|improve this question

















This question already has an answer here:




  • What methods of ‘clearfix’ can I use?

    28 answers



  • HTML radio buttons allowing multiple selections

    6 answers




I created a responsive form which changes to two columns when the screen size is resized. It mostly works the way I want it to.



However the label for textarea keeps showing incorrectly. I want it to display on a new line, but it keeps showing in the area of radio buttons.



There is also an issue with radio buttons where both can be selected at the same time. I have been trying to figure out what I did wrong but I can't find a solution.



Here is my code on jsfiddle.






/* CSS */

.myForm {
padding: 40px 20px;
}

.myForm h2,
.myForm p {
text-align: center;
padding: 0 10px;
}

.myForm h2 {
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
}

.myForm p {
margin-bottom: 20px;
font-size: 12px;
}

.myForm label {
font-size: 14px;
}

form input {
border: 1px solid #a9a9a9;
border-radius: 3px;
height: 25px;
width: 96%;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}

.label,
.radio input[type="radio"] {
display: inline;
float: left;
width: auto;
margin: 10px 0;
padding: 0 10px;
}

input[type="radio"],
input.radio {
vertical-align: text-top;
width: 13px;
height: 13px;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
top: -8px;
right: 5px;
}

.msg textarea {
width: 96%;
border: 1px solid #a9a9a9;
border-radius: 3px;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}

form button {
background-color: #a9a9a9;
color: #fff;
width: 100%;
text-transform: uppercase;
padding: 10px;
border: none;
border-radius: 3px;
}

@media only screen and (min-width: 768px) {
/*Left form column*/
.left {
display: block;
float: left;
width: 48%;
}
/*Right form column*/
.right {
display: block;
float: right;
width: 48%;
}
.label,
.radio input[type="radio"] {
padding-right: 30px;
padding-left: 30px;
}
}

<!-- HTML -->
<form class="myForm">
<h2>Lorem ipsum</h2>
<p>text</p>
<div class="fields">
<label class="left">First Name
<input type="text" name="other"></label>
<label class="right">Last Name
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<div class="radio right">
<label>Some text</label><br>
<label class="label">
<input type="radio" name="phone" value="phone">Phone</label>
<label class="label close">
<input type="radio" name="email" value="email">Email</label>
</div>
<div class="msg">
<label>Message</label>
<textarea rows="5"></textarea>
</div>
</div>
<button type="button" name="button">Send</button>
</form>







This question already has an answer here:




  • What methods of ‘clearfix’ can I use?

    28 answers



  • HTML radio buttons allowing multiple selections

    6 answers







/* CSS */

.myForm {
padding: 40px 20px;
}

.myForm h2,
.myForm p {
text-align: center;
padding: 0 10px;
}

.myForm h2 {
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
}

.myForm p {
margin-bottom: 20px;
font-size: 12px;
}

.myForm label {
font-size: 14px;
}

form input {
border: 1px solid #a9a9a9;
border-radius: 3px;
height: 25px;
width: 96%;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}

.label,
.radio input[type="radio"] {
display: inline;
float: left;
width: auto;
margin: 10px 0;
padding: 0 10px;
}

input[type="radio"],
input.radio {
vertical-align: text-top;
width: 13px;
height: 13px;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
top: -8px;
right: 5px;
}

.msg textarea {
width: 96%;
border: 1px solid #a9a9a9;
border-radius: 3px;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}

form button {
background-color: #a9a9a9;
color: #fff;
width: 100%;
text-transform: uppercase;
padding: 10px;
border: none;
border-radius: 3px;
}

@media only screen and (min-width: 768px) {
/*Left form column*/
.left {
display: block;
float: left;
width: 48%;
}
/*Right form column*/
.right {
display: block;
float: right;
width: 48%;
}
.label,
.radio input[type="radio"] {
padding-right: 30px;
padding-left: 30px;
}
}

<!-- HTML -->
<form class="myForm">
<h2>Lorem ipsum</h2>
<p>text</p>
<div class="fields">
<label class="left">First Name
<input type="text" name="other"></label>
<label class="right">Last Name
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<div class="radio right">
<label>Some text</label><br>
<label class="label">
<input type="radio" name="phone" value="phone">Phone</label>
<label class="label close">
<input type="radio" name="email" value="email">Email</label>
</div>
<div class="msg">
<label>Message</label>
<textarea rows="5"></textarea>
</div>
</div>
<button type="button" name="button">Send</button>
</form>





/* CSS */

.myForm {
padding: 40px 20px;
}

.myForm h2,
.myForm p {
text-align: center;
padding: 0 10px;
}

.myForm h2 {
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
}

.myForm p {
margin-bottom: 20px;
font-size: 12px;
}

.myForm label {
font-size: 14px;
}

form input {
border: 1px solid #a9a9a9;
border-radius: 3px;
height: 25px;
width: 96%;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}

.label,
.radio input[type="radio"] {
display: inline;
float: left;
width: auto;
margin: 10px 0;
padding: 0 10px;
}

input[type="radio"],
input.radio {
vertical-align: text-top;
width: 13px;
height: 13px;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
top: -8px;
right: 5px;
}

.msg textarea {
width: 96%;
border: 1px solid #a9a9a9;
border-radius: 3px;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}

form button {
background-color: #a9a9a9;
color: #fff;
width: 100%;
text-transform: uppercase;
padding: 10px;
border: none;
border-radius: 3px;
}

@media only screen and (min-width: 768px) {
/*Left form column*/
.left {
display: block;
float: left;
width: 48%;
}
/*Right form column*/
.right {
display: block;
float: right;
width: 48%;
}
.label,
.radio input[type="radio"] {
padding-right: 30px;
padding-left: 30px;
}
}

<!-- HTML -->
<form class="myForm">
<h2>Lorem ipsum</h2>
<p>text</p>
<div class="fields">
<label class="left">First Name
<input type="text" name="other"></label>
<label class="right">Last Name
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<div class="radio right">
<label>Some text</label><br>
<label class="label">
<input type="radio" name="phone" value="phone">Phone</label>
<label class="label close">
<input type="radio" name="email" value="email">Email</label>
</div>
<div class="msg">
<label>Message</label>
<textarea rows="5"></textarea>
</div>
</div>
<button type="button" name="button">Send</button>
</form>






html css responsive






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 '18 at 11:23









Pete

42.2k1879120




42.2k1879120










asked Nov 22 '18 at 11:16









daydreamerdaydreamer

202




202




marked as duplicate by Pete css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 '18 at 11:24


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.









marked as duplicate by Pete css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 '18 at 11:24


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • For select one radio button you have to give same name for their attributes.

    – Shubham Baranwal
    Nov 22 '18 at 11:21











  • Oh! Of course, how did I miss that, thank you!

    – daydreamer
    Nov 22 '18 at 11:23











  • Your updated JSFiddle

    – Shubham Baranwal
    Nov 22 '18 at 11:25



















  • For select one radio button you have to give same name for their attributes.

    – Shubham Baranwal
    Nov 22 '18 at 11:21











  • Oh! Of course, how did I miss that, thank you!

    – daydreamer
    Nov 22 '18 at 11:23











  • Your updated JSFiddle

    – Shubham Baranwal
    Nov 22 '18 at 11:25

















For select one radio button you have to give same name for their attributes.

– Shubham Baranwal
Nov 22 '18 at 11:21





For select one radio button you have to give same name for their attributes.

– Shubham Baranwal
Nov 22 '18 at 11:21













Oh! Of course, how did I miss that, thank you!

– daydreamer
Nov 22 '18 at 11:23





Oh! Of course, how did I miss that, thank you!

– daydreamer
Nov 22 '18 at 11:23













Your updated JSFiddle

– Shubham Baranwal
Nov 22 '18 at 11:25





Your updated JSFiddle

– Shubham Baranwal
Nov 22 '18 at 11:25












2 Answers
2






active

oldest

votes


















0














this should help:



.msg{
clear:both;
}





share|improve this answer
























  • That worked, thank you! I can't believe how easy that was, and yet I kept struggling. Thanks!

    – daydreamer
    Nov 22 '18 at 11:25






  • 1





    @daydreamer you probably want to learn how to use something like flex rather than using floats - with css3, you shouldn't be abusing floats for layout anymore

    – Pete
    Nov 22 '18 at 11:26











  • Thanks, I'll make sure to do that.

    – daydreamer
    Nov 22 '18 at 11:38



















0














To fix the two problems you describe:




  1. Your radio buttons need to have the same name field to be in the same group. If you set name="contact" for both, then they'll no longer be selectable at the same time.

  2. You should remove float: left; from your CSS rules for .radio input[type="radio"]. This is taking precedence over the display: block; of the .msg div and causing them to be displayed on the same line.






share|improve this answer
























  • Thank you! And thanks for clarification on the second point.

    – daydreamer
    Nov 22 '18 at 12:00


















2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














this should help:



.msg{
clear:both;
}





share|improve this answer
























  • That worked, thank you! I can't believe how easy that was, and yet I kept struggling. Thanks!

    – daydreamer
    Nov 22 '18 at 11:25






  • 1





    @daydreamer you probably want to learn how to use something like flex rather than using floats - with css3, you shouldn't be abusing floats for layout anymore

    – Pete
    Nov 22 '18 at 11:26











  • Thanks, I'll make sure to do that.

    – daydreamer
    Nov 22 '18 at 11:38
















0














this should help:



.msg{
clear:both;
}





share|improve this answer
























  • That worked, thank you! I can't believe how easy that was, and yet I kept struggling. Thanks!

    – daydreamer
    Nov 22 '18 at 11:25






  • 1





    @daydreamer you probably want to learn how to use something like flex rather than using floats - with css3, you shouldn't be abusing floats for layout anymore

    – Pete
    Nov 22 '18 at 11:26











  • Thanks, I'll make sure to do that.

    – daydreamer
    Nov 22 '18 at 11:38














0












0








0







this should help:



.msg{
clear:both;
}





share|improve this answer













this should help:



.msg{
clear:both;
}






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 22 '18 at 11:20









shakogeleshakogele

360213




360213













  • That worked, thank you! I can't believe how easy that was, and yet I kept struggling. Thanks!

    – daydreamer
    Nov 22 '18 at 11:25






  • 1





    @daydreamer you probably want to learn how to use something like flex rather than using floats - with css3, you shouldn't be abusing floats for layout anymore

    – Pete
    Nov 22 '18 at 11:26











  • Thanks, I'll make sure to do that.

    – daydreamer
    Nov 22 '18 at 11:38



















  • That worked, thank you! I can't believe how easy that was, and yet I kept struggling. Thanks!

    – daydreamer
    Nov 22 '18 at 11:25






  • 1





    @daydreamer you probably want to learn how to use something like flex rather than using floats - with css3, you shouldn't be abusing floats for layout anymore

    – Pete
    Nov 22 '18 at 11:26











  • Thanks, I'll make sure to do that.

    – daydreamer
    Nov 22 '18 at 11:38

















That worked, thank you! I can't believe how easy that was, and yet I kept struggling. Thanks!

– daydreamer
Nov 22 '18 at 11:25





That worked, thank you! I can't believe how easy that was, and yet I kept struggling. Thanks!

– daydreamer
Nov 22 '18 at 11:25




1




1





@daydreamer you probably want to learn how to use something like flex rather than using floats - with css3, you shouldn't be abusing floats for layout anymore

– Pete
Nov 22 '18 at 11:26





@daydreamer you probably want to learn how to use something like flex rather than using floats - with css3, you shouldn't be abusing floats for layout anymore

– Pete
Nov 22 '18 at 11:26













Thanks, I'll make sure to do that.

– daydreamer
Nov 22 '18 at 11:38





Thanks, I'll make sure to do that.

– daydreamer
Nov 22 '18 at 11:38













0














To fix the two problems you describe:




  1. Your radio buttons need to have the same name field to be in the same group. If you set name="contact" for both, then they'll no longer be selectable at the same time.

  2. You should remove float: left; from your CSS rules for .radio input[type="radio"]. This is taking precedence over the display: block; of the .msg div and causing them to be displayed on the same line.






share|improve this answer
























  • Thank you! And thanks for clarification on the second point.

    – daydreamer
    Nov 22 '18 at 12:00
















0














To fix the two problems you describe:




  1. Your radio buttons need to have the same name field to be in the same group. If you set name="contact" for both, then they'll no longer be selectable at the same time.

  2. You should remove float: left; from your CSS rules for .radio input[type="radio"]. This is taking precedence over the display: block; of the .msg div and causing them to be displayed on the same line.






share|improve this answer
























  • Thank you! And thanks for clarification on the second point.

    – daydreamer
    Nov 22 '18 at 12:00














0












0








0







To fix the two problems you describe:




  1. Your radio buttons need to have the same name field to be in the same group. If you set name="contact" for both, then they'll no longer be selectable at the same time.

  2. You should remove float: left; from your CSS rules for .radio input[type="radio"]. This is taking precedence over the display: block; of the .msg div and causing them to be displayed on the same line.






share|improve this answer













To fix the two problems you describe:




  1. Your radio buttons need to have the same name field to be in the same group. If you set name="contact" for both, then they'll no longer be selectable at the same time.

  2. You should remove float: left; from your CSS rules for .radio input[type="radio"]. This is taking precedence over the display: block; of the .msg div and causing them to be displayed on the same line.







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 22 '18 at 11:23









varkorvarkor

1279




1279













  • Thank you! And thanks for clarification on the second point.

    – daydreamer
    Nov 22 '18 at 12:00



















  • Thank you! And thanks for clarification on the second point.

    – daydreamer
    Nov 22 '18 at 12:00

















Thank you! And thanks for clarification on the second point.

– daydreamer
Nov 22 '18 at 12:00





Thank you! And thanks for clarification on the second point.

– daydreamer
Nov 22 '18 at 12:00



oqVxMBQfgpM8k,WMd,1lzgIQKG9Z,ky3tznYkPUQWZYvztM PJM6Q
7 c,Mmm0zLV,tVmkHVcOeg1VfVMIsdQhoU,HIMIputPRvc895S0R7 fGPEgk3 uEkn 6KDBOhgyr

Popular posts from this blog

mysqli_query(): Empty query in /home/lucindabrummitt/public_html/blog/wp-includes/wp-db.php on line 1924

How to change which sound is reproduced for terminal bell?

Can I use Tabulator js library in my java Spring + Thymeleaf project?