CSS Radio section not stacking on top properly? - html

Question

I'm trying to stack my radio button labels on top of each other with the radio button option on right of the label
Here is my HTML
<p>Instagram destorys the younger generation:</p>
<div class="instagram">
<input type="radio" name="instagram" value="agree" id="agree">
<label for="agree">Agree</label>
<input type="radio" name="instagram" value="disagree" id="agree">
<label for="disagree">Disagree</label>
<input type="radio" name="instagram" value="strongly" id="agree">
<label for="strongly">Strongly Disagree</label><br>
<br>
</div>
Here is my CSS
/* the styles for the elements */
body {
font-family: Arial, Helvetica, sans-serif;
width: 900px;
margin: 0 auto;
padding: 0;
box-shadow: 0 10px 20px 10px;
}
h1, h2, h3, p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
font-weight: bold;
}
a:hover, a:focus {
color: maroon;
}
/* the styles for the header */
header {
border-bottom: 3px solid #FFD300;
background-image: -moz-linear-gradient(
30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
background-image: -webkit-linear-gradient(
30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
background-image: -o-linear-gradient(
30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
background-image: linear-gradient(
30deg, #000000 0%, #FFD300 30%, white 50%, #00000080 80%, #2641B3 100%);
padding: 15px 30px;
}
header img {
float: left;
}
header h2 {
font-size: 250%;
font-style: italic;
color: steelblue;
text-indent: 45px;
text-shadow: 3px 3px 3px steelblue;
margin-bottom: .3em;
}
header h3 {
font-size: 150%;
text-indent: 45px;
padding-bottom: .75em;
}
/* the styles for the navigation menu */
#nav_menu {
clear: left;
}
#nav_menu ul {
list-style: none;
position: relative;
display: flex;
justify-content: space-evenly;
}
#nav_menu ul li {
float: left;
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li {
float: none;
}
#nav_menu ul li:hover > ul {
display: block;
}
#nav_menu > ul::after {
content: "";
clear: both;
display: block;
}
#nav_menu ul {
margin: 0;
padding: 0;
}
#nav_menu ul li a {
text-align: center;
display: block;
width: 180px;
padding: .7em 0;
font-weight: bold;
color: white;
}
#nav_menu ul li a.current {
color: black;
}
#nav_menu ul li a:hover, #nav_menu ul li a:focus {
background-color: lightsteelblue;
}
/* the styles for the section */
section {
width: 565px;
float: right;
padding: 25px 30px;
}
section h1 {
font-size: 160%;
margin-bottom: .3em;
}
section p {
font-size: 100%;
margin-bottom: .7em;
}
/*thestyle for the form*/
fieldset {
margin-bottom: .5em;
padding: .5em 1em;
}
fieldset p {
font-size: 90%;
margin-bottom: .5em;
}
legend {
font-weight: bold;
font-size: 90%;
padding-bottom: .9em;
}
label, input, select {
font-size: 90%;
}
label {
display: block;
width: 9em;
text-align: right;
}
input, select {
width: 15em;
margin-left: .5em;
margin-bottom: .7em;
}
input:required, input[required] input:invalid
{
border: 2px solid maroon;
}
input:valid {
border: 1px solid black;
}
input:invalid {
box-shadow: none;
}
br {
clear: both;
}
#buttons input {
width: 10em;
}
textarea {
height: 10em;
width: 40em;
margin-left: 2.5em;
font-family: Arial, Helvetica, sans-serif;
}
#lifestyle label, #food label, #comments label {
float: none;
}
#lifestyle input, #food input {
width: auto;
margin-left: 3em;
}
#buttons input {
width: 10em;
}
#submit {
margin-left: 3em;
}
/* the styles for the sidebar */
aside {
float: left;
width: 245px;
padding: 25px 0 0 30px;
}
aside h2 {
font-size: 130%;
color: maroon;
margin-bottom: 8px;
}
aside ul {
line-height: 1.5;
margin: 0;
padding-left: 16px;
}
aside a:link, aside a:visited {
color: steelblue;
}
aside a:hover, aside a:focus {
color: maroon;
}
/* the styles for the footer */
footer {
clear: both;
padding: 15px 30px;
background-color: steelblue;
}
footer p {
text-align: center;
font-size: 85%;
color: white;
}
.instagram, #agree {
display: inline;
justify-content: flex-start;
text-align: left;
width: 1rem;
}
The full HTML is below
<main>
<section>
<h1>Opinion about Social Media</h1>
<p>Please answer the questions honestly!</p>
<form action="opinion_request.html" method="get" id="opinions_form">
<fieldset>
<legend>Please try to answer every question</legend><br><br>
<label for="name">Full name:</label>
<input type="text" id="name" autofocus required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" required><br><br>
<label for="gender">Gender:</label>
<select id="gender">
<option value="none">Select a Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>
<label>How many hrs per day do you use Social Media?:</label>
<select id="age">
<option value="none">Select your choice</option>
<option value="1-2hrsr">1-2hrs</option>
<option value="2-4hrs">2-4hrs</option>
<option value="5hrs+">5hrs+</option>
</select><br><br>
<label for="social">List 2 social medias that you use the most:</label>
<input type="text" id="social" placeholder="Example: Instagram, Twitter, Facebook"><br><br>
<label for="rate">Rate Twitter from 1 to 5:</label>
<input type="range" id="rate"
min="1" max="5" step="1"><br><br>
</fieldset>
<fieldset>
<legend>Survey</legend><br>
Date you first started social media:
<input type="date" id="date"><br><br>
<p>Instagram destorys the younger generation:</p>
<div class="instagram">
<input type="radio" name="instagram" value="agree" id="agree">
<label for="agree">Agree</label>
<input type="radio" name="instagram" value="disagree" id="agree">
<label for="disagree">Disagree</label>
<input type="radio" name="instagram" value="strongly" id="agree">
<label for="strongly">Strongly Disagree</label><br>
<br>
</div>
<p>Linkedin is the best networking social media:</p>
<input type="radio" name="link" value="agree" id="agree">
<label for="agree">Agree</label>
<input type="radio" name="link" value="disagree" id="agree">
<label for="disagree">Disagree</label>
<input type="radio" name="link" value="strongly" id="agree">
<label for="strongly">Strongly Disagree</label><br><br>
<p>Tiktok is the next big social media:</p>
<input type="radio" name="tiktok" value="agree" id="agree">
<label for="agree">Agree</label>
<input type="radio" name="tiktok" value="disagree" id="agree">
<label for="disagree">Disagree</label>
<input type="radio" name="tiktok" value="strongly" id="agree">
<label for="strongly">Strongly Disagree</label><br><br>
<p>Facebook is the most popular social media:</p>
<input type="radio" name="fb" value="agree" id="agree">
<label for="agree">Agree</label>
<input type="radio" name="" value="disagree" id="agree">
<label for="disagree">Disagree</label>
<input type="radio" name="social" value="strongly" id="agree">
<label for="strongly">Strongly Disagree</label><br><br>
</fieldset>
<fieldset><br>
<legend>Comments:</legend>
<p>In 10 years do you think you'll still use social media? Why or why not?</p>
<textarea id="text-area">
</textarea>
</fieldset>
<br>
<fieldset id="buttons">
<legend>Process your information</legend><br>
<input type="submit" id="submit" value="Submit now">
<input type="reset" id="submit" value="start over">
</fieldset>
</form>
</section>
</main>
Here are pics of what it currently looks like and how I want it to look like

Answer 1

You can add some css rules to achieve the desired result. Add the following css rules.
#opinions_form input[type=radio]~label::after {
height: 1px;
width: 100%;
display: block;
content: '';
}
And remove display:block rule in label selector. Change it to following.
label {
width: 9em;
text-align: right;
}
Check this codepen link.
https://codepen.io/aryantw/pen/vYNOWOL

Answer 2

I made couple div around, reason it makes it clean and consistent across the options. important thing is used flex so that it makes the items inline, hope it works for you:
body {
font-family: Arial, Helvetica, sans-serif;
width: 900px;
margin: 0;
padding: 0;
border: 0;
box-shadow: 0 10px 20px 10px;
}
h1,
h2,
h3,
p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
font-weight: bold;
}
a:hover,
a:focus {
color: maroon;
}
/* the styles for the header */
header {
border-bottom: 3px solid #FFD300;
background-image: -moz-linear-gradient( 30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
background-image: -webkit-linear-gradient( 30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
background-image: -o-linear-gradient( 30deg, #000000 0%, #FFD300 30%, white 50%, #000000 80%, #2641B3 100%);
background-image: linear-gradient( 30deg, #000000 0%, #FFD300 30%, white 50%, #00000080 80%, #2641B3 100%);
padding: 15px 30px;
}
header img {
float: left;
}
header h2 {
font-size: 250%;
font-style: italic;
color: steelblue;
text-indent: 45px;
text-shadow: 3px 3px 3px steelblue;
margin-bottom: .3em;
}
header h3 {
font-size: 150%;
text-indent: 45px;
padding-bottom: .75em;
}
/* the styles for the navigation menu */
#nav_menu {
clear: left;
}
#nav_menu ul {
list-style: none;
position: relative;
display: flex;
justify-content: space-evenly;
}
#nav_menu ul li {
float: left;
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li {
float: none;
}
#nav_menu ul li:hover>ul {
display: block;
}
#nav_menu>ul::after {
content: "";
clear: both;
display: block;
}
#nav_menu ul {
margin: 0;
padding: 0;
}
#nav_menu ul li a {
text-align: center;
display: block;
width: 180px;
padding: .7em 0;
font-weight: bold;
color: white;
}
#nav_menu ul li a.current {
color: black;
}
#nav_menu ul li a:hover,
#nav_menu ul li a:focus {
background-color: lightsteelblue;
}
/* the styles for the section */
section {
width: 565px;
float: right;
padding: 25px 30px;
}
section h1 {
font-size: 160%;
margin-bottom: .3em;
}
section p {
font-size: 100%;
margin-bottom: .7em;
}
/*thestyle for the form*/
fieldset {
margin-bottom: .5em;
padding: .5em 1em;
}
fieldset p {
font-size: 90%;
margin-bottom: .5em;
}
legend {
font-weight: bold;
font-size: 90%;
padding-bottom: .9em;
}
label,
input,
select {
font-size: 90%;
}
label {
display: block;
width: 9em;
text-align: right;
}
select {
width: 15em;
margin-left: .5em;
margin-bottom: .7em;
}
input:required,
input[required] input:invalid {
border: 2px solid maroon;
}
input:valid {
border: 1px solid black;
}
input:invalid {
box-shadow: none;
}
br {
clear: both;
}
#buttons input {
width: 10em;
}
textarea {
height: 10em;
width: 40em;
margin-left: 2.5em;
font-family: Arial, Helvetica, sans-serif;
}
#lifestyle label,
#food label,
#comments label {
float: none;
}
#lifestyle input,
#food input {
width: auto;
margin-left: 3em;
}
#buttons input {
width: 10em;
}
#submit {
margin-left: 3em;
}
/* the styles for the sidebar */
aside {
float: left;
width: 245px;
padding: 25px 0 0 30px;
}
aside h2 {
font-size: 130%;
color: maroon;
margin-bottom: 8px;
}
aside ul {
line-height: 1.5;
margin: 0;
padding-left: 16px;
}
aside a:link,
aside a:visited {
color: steelblue;
}
aside a:hover,
aside a:focus {
color: maroon;
}
/* the styles for the footer */
footer {
clear: both;
padding: 15px 30px;
background-color: steelblue;
}
footer p {
text-align: center;
font-size: 85%;
color: white;
}
.instagram,
.facebook,
.tiktok,
.linkedin {
justify-content: space-between;
text-align: center;
width: auto;
margin-left: 15%;
}
.opinioncolumn {
display: flex;
flex-direction: column;
}
.opinionRow {
display: flex;
}
<main>
<section>
<h1>Opinion about Social Media</h1>
<p>Please answer the questions honestly!</p>
<form action="opinion_request.html" method="get" id="opinions_form">
<fieldset>
<legend>Please try to answer every question</legend><br><br>
<label for="name">Full name:</label>
<input type="text" id="name" autofocus required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" required><br><br>
<label for="gender">Gender:</label>
<select id="gender">
<option value="none">Select a Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>
<label>How many hrs per day do you use Social Media?:</label>
<select id="age">
<option value="none">Select your choice</option>
<option value="1-2hrsr">1-2hrs</option>
<option value="2-4hrs">2-4hrs</option>
<option value="5hrs+">5hrs+</option>
</select><br><br>
<label for="social">List 2 social medias that you use the most:</label>
<input type="text" id="social" placeholder="Example: Instagram, Twitter, Facebook"><br><br>
<label for="rate">Rate Twitter from 1 to 5:</label>
<input type="range" id="rate" min="1" max="5" step="1"><br><br>
</fieldset>
<fieldset>
<legend>Survey</legend><br> Date you first started social media:
<input type="date" id="date"><br><br>
<p>Instagram destorys the younger generation:</p>
<div class="instagram">
<div class="opinioncolumn">
<div class="opinionRow">
<label for="agree">Agree</label>
<input type="radio" name="instagram" value="agree" id="agree">
</div>
</div>
<div class="opinioncolumn">
<div class="opinionRow">
<label for="disagree">Disagree</label>
<input type="radio" name="instagram" value="disagree" id="agree">
</div>
</div>
<div class="opinioncolumn">
<div class="opinionRow">
<label for="strongly">Strongly Disagree</label><br>
<input type="radio" name="instagram" value="strongly" id="agree">
</div>
</div>
<br>
</div>
<p>Linkedin is the best networking social media:</p>
<div class="linkedin">
<div class="opinioncolumn">
<div class="opinionRow">
<label for="agree">Agree</label>
<input type="radio" name="link" value="agree" id="agree">
</div>
</div>
<div class="opinioncolumn">
<div class="opinionRow">
<label for="disagree">Disagree</label>
<input type="radio" name="link" value="disagree" id="agree">
</div>
</div>
<div class="opinioncolumn">
<div class="opinionRow">
<label for="strongly">Strongly Disagree</label>
<input type="radio" name="link" value="strongly" id="agree">
<br><br>
</div>
</div>
<br>
</div>
<p>Tiktok is the next big social media:</p>
<div class="tiktok">
<div class="opinioncolumn">
<div class="opinionRow">
<label for="agree">Agree</label>
<input type="radio" name="tiktok" value="agree" id="agree">
</div>
</div>
<div class="opinioncolumn">
<div class="opinionRow">
<label for="disagree">Disagree</label>
<input type="radio" name="tiktok" value="disagree" id="agree">
</div>
</div>
<div class="opinioncolumn">
<div class="opinionRow">
<label for="strongly">Strongly Disagree</label>
<input type="radio" name="tiktok" value="strongly" id="agree">
<br><br>
</div>
</div>
</div>
<p>Facebook is the most popular social media:</p>
<div class="facebook">
<div class="opinioncolumn">
<div class="opinionRow">
<label for="agree">Agree</label>
<input type="radio" name="fb" value="agree" id="agree">
</div>
</div>
<div class="opinioncolumn">
<div class="opinionRow">
<label for="disagree">Disagree</label>
<input type="radio" name="" value="disagree" id="agree">
</div>
</div>
<div class="opinioncolumn">
<div class="opinionRow">
<label for="strongly">Strongly Disagree</label><br><br>
<input type="radio" name="social" value="strongly" id="agree">
</div>
</div>
</div>
</fieldset>
<fieldset><br>
<legend>Comments:</legend>
<p>In 10 years do you think you'll still use social media? Why or why not?</p>
<textarea id="text-area">
</textarea>
</fieldset>
<br>
<fieldset id="buttons">
<legend>Process your information</legend><br>
<input type="submit" id="submit" value="Submit now">
<input type="reset" id="submit" value="start over">
</fieldset>
</form>
</section>
</main>