How to make the textarea label display correctly [duplicate]
.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>html css responsive
edited Nov 22 '18 at 11:23
Pete
42.2k1879120
asked Nov 22 '18 at 11:16
daydreamerdaydreamer
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.
add a comment |
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>html css responsive
edited Nov 22 '18 at 11:23
Pete
42.2k1879120
asked Nov 22 '18 at 11:16
daydreamerdaydreamer
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.
For select one radio button you have to give samenamefor 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
add a comment |
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>html css responsive
edited Nov 22 '18 at 11:23
Pete
42.2k1879120
asked Nov 22 '18 at 11:16
daydreamerdaydreamer
202
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
html css responsive
edited Nov 22 '18 at 11:23
Pete
42.2k1879120
asked Nov 22 '18 at 11:16
daydreamerdaydreamer
202
edited Nov 22 '18 at 11:23
Pete
42.2k1879120
asked Nov 22 '18 at 11:16
daydreamerdaydreamer
202
edited Nov 22 '18 at 11:23
Pete
42.2k1879120
edited Nov 22 '18 at 11:23
Pete
42.2k1879120
edited Nov 22 '18 at 11:23
Pete
42.2k1879120
42.2k1879120
asked Nov 22 '18 at 11:16
daydreamerdaydreamer
202
asked Nov 22 '18 at 11:16
daydreamerdaydreamer
202
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 samenamefor 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
add a comment |
For select one radio button you have to give samenamefor 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
add a comment |
2 Answers
2
active
oldest
votes
0
this should help:
.msg{
clear:both;
}
answered Nov 22 '18 at 11:20
shakogeleshakogele
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
add a comment |
0
To fix the two problems you describe:
- Your radio buttons need to have the same
namefield to be in the same group. If you setname="contact"for both, then they'll no longer be selectable at the same time. - You should remove
float: left;from your CSS rules for.radio input[type="radio"]. This is taking precedence over thedisplay: block;of the.msgdivand causing them to be displayed on the same line.
answered Nov 22 '18 at 11:23
varkorvarkor
1279
Thank you! And thanks for clarification on the second point.
– daydreamer
Nov 22 '18 at 12:00
add a comment |
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;
}
answered Nov 22 '18 at 11:20
shakogeleshakogele
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
add a comment |
0
this should help:
.msg{
clear:both;
}
answered Nov 22 '18 at 11:20
shakogeleshakogele
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
add a comment |
0
0
0
this should help:
.msg{
clear:both;
}
answered Nov 22 '18 at 11:20
shakogeleshakogele
360213
this should help:
.msg{
clear:both;
}
answered Nov 22 '18 at 11:20
shakogeleshakogele
360213
answered Nov 22 '18 at 11:20
shakogeleshakogele
360213
answered Nov 22 '18 at 11:20
shakogeleshakogele
360213
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
add a comment |
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
add a comment |
0
To fix the two problems you describe:
- Your radio buttons need to have the same
namefield to be in the same group. If you setname="contact"for both, then they'll no longer be selectable at the same time. - You should remove
float: left;from your CSS rules for.radio input[type="radio"]. This is taking precedence over thedisplay: block;of the.msgdivand causing them to be displayed on the same line.
answered Nov 22 '18 at 11:23
varkorvarkor
1279
Thank you! And thanks for clarification on the second point.
– daydreamer
Nov 22 '18 at 12:00
add a comment |
0
To fix the two problems you describe:
- Your radio buttons need to have the same
namefield to be in the same group. If you setname="contact"for both, then they'll no longer be selectable at the same time. - You should remove
float: left;from your CSS rules for.radio input[type="radio"]. This is taking precedence over thedisplay: block;of the.msgdivand causing them to be displayed on the same line.
answered Nov 22 '18 at 11:23
varkorvarkor
1279
Thank you! And thanks for clarification on the second point.
– daydreamer
Nov 22 '18 at 12:00
add a comment |
0
0
0
To fix the two problems you describe:
- Your radio buttons need to have the same
namefield to be in the same group. If you setname="contact"for both, then they'll no longer be selectable at the same time. - You should remove
float: left;from your CSS rules for.radio input[type="radio"]. This is taking precedence over thedisplay: block;of the.msgdivand causing them to be displayed on the same line.
answered Nov 22 '18 at 11:23
varkorvarkor
1279
To fix the two problems you describe:
- Your radio buttons need to have the same
namefield to be in the same group. If you setname="contact"for both, then they'll no longer be selectable at the same time. - You should remove
float: left;from your CSS rules for.radio input[type="radio"]. This is taking precedence over thedisplay: block;of the.msgdivand causing them to be displayed on the same line.
answered Nov 22 '18 at 11:23
varkorvarkor
1279
answered Nov 22 '18 at 11:23
varkorvarkor
1279
answered Nov 22 '18 at 11:23
varkorvarkor
1279
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
add a comment |
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
add a comment |
For select one radio button you have to give same
namefor 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