0

I have a layout problem. I want to align my choices properly even if it is on a new line.

html,body{
  overflow: hidden;
  height: 100%;
}

.question_wrapper{

  margin: 0px 40px;
  padding-top: 80px;

}

/* Start Reading Comprehension */

.question_wrapper .reading_question_assessment_wrapper{
  display: flex;
}

.question_wrapper .reading_assessment_question_scenario{
  width: 70%;
  border-right: 2px solid #000000;
  height: 100vh;
  padding-right: 35px;
}

.question_wrapper .reading_assessment_choices{
  width: 30%;
  margin-left: 15px;
}

.question_wrapper .reading_question_content{

  font-style: italic;
  text-align: center;

}


.question_wrapper .reading_question_scenario{

  font-style: italic;
  padding-top: 30px;

}

.question_wrapper label{
  font-style: italic;
}

.question_wrapper .reading_question_choice input[type="radio"] {
  margin: 20px 20px 0px 70px;
  transform: scale(1.5);
}

.question_wrapper .question_choice input[type="radio"] {
  margin: 20px 20px 0px 70px;
  transform: scale(1.5);
}

.question_wrapper input[type="radio"] + label:after {
  content: '';
  display: block;
}

.question_wrapper input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #FAFAFA;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 1px solid #000;
 }

.question_wrapper input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #555;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 1px solid #000;
 }

 .question_wrapper .reading_assessment_choices .reading_question_choice{
   line-height: 1.5em;
 }
<html>
<body>
<form id="form_question_scenario" method="POST" action="" class="question_wrapper">
  <div id="reading_question_assessment_scenario" class="reading_question_assessment_wrapper">

    <div class="reading_assessment_question_scenario">

      <div class="question_counter">
        <p id="question_scenario_count">Scenario 1 of 4</p>
      </div>

      <div class="reading_question_content">
        <p id="display_scenario">
        test
        </p>
      </div>

    </div>

    <div class="reading_assessment_choices">

        <div class="reading_question_scenario">
        <p id="display_question_scenario">
          1. Back in the day, who were the only ones who could vote?
        </p>
        </div>

      <div id="question_choices" class="reading_question_choice">
        <input type="radio" name="answer_choice" value="17">
        <label>Give an extra break in the middle of the afternoon.</label>
        <input type="radio" name="answer_choice" value="18">
        <label>to encourage customers to tell their friends and family</label>
        <input type="radio" name="answer_choice" value="19">
        <label>Give an extra break in the middle of the afternoon.</label>
        <input type="radio" name="answer_choice" value="20">
        <label>to share the operating hours and swimming lesson schedule</label>
      </div>

        <div class="btn_submit">
            <button id="click" type="submit">Submit</button>
        </div>

    </div>

  </div>

  </form>


</body>
</html>

Output that I have right now:

   [Radio Button] Question Sample Sample
Sample Sample

   [Radio Button] Question Sample Sample
Sample Sample

   [Radio Button] Question Sample Sample
Sample Sample

   [Radio Button] Question Sample Sample
Sample Sample

Desired Outcome that I want

   [Radio Button] Question Sample Sample
                  Sample Sample

   [Radio Button] Question Sample Sample
                  Sample Sample

   [Radio Button] Question Sample Sample
                  Sample Sample

   [Radio Button] Question Sample Sample
                  Sample Sample

I really don't know or have any idea on how to fix my layout.

Is this possible? How can I do this on my code right now? Any help would be really appreciated.

0

3 Answers 3

1

I have done some modification to your CSS. I have used css-grid here. This grid has two columns first column will have width of radio button and second will have width 1fr means available free space. Then I added padding for the label to avoid the overlapping of label and radio button.

Added following lines:

/* Added this style for the answer wrapper */
#question_choices {
  display: grid;
  grid-template-columns: 26px 1fr;
}

.question_wrapper label{
  font-style: italic;
  /* Added below line */
  padding: 10px 20px 0px 70px;
}

html,body{
  overflow: hidden;
  height: 100%;
}

.question_wrapper{

  margin: 0px 40px;
  padding-top: 80px;

}

/* Start Reading Comprehension */

.question_wrapper .reading_question_assessment_wrapper{
  display: flex;
}

.question_wrapper .reading_assessment_question_scenario{
  width: 70%;
  border-right: 2px solid #000000;
  height: 100vh;
  padding-right: 35px;
}

.question_wrapper .reading_assessment_choices{
  width: 30%;
  margin-left: 15px;
}

.question_wrapper .reading_question_content{

  font-style: italic;
  text-align: center;

}


.question_wrapper .reading_question_scenario{

  font-style: italic;
  padding-top: 30px;

}

.question_wrapper label{
  font-style: italic;
  padding: 10px 20px 0px 70px;
}

.question_wrapper .reading_question_choice input[type="radio"] {
  margin: 20px 20px 0px 70px;
  transform: scale(1.5);
}

.question_wrapper .question_choice input[type="radio"] {
  margin: 20px 20px 0px 70px;
  transform: scale(1.5);
}

.question_wrapper input[type="radio"] + label:after {
  content: '';
  display: block;
}

.question_wrapper input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #FAFAFA;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 1px solid #000;
 }

.question_wrapper input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #555;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 1px solid #000;
 }

 .question_wrapper .reading_assessment_choices .reading_question_choice{
   line-height: 1.5em;
 }
 
 #question_choices {
  display: grid;
  grid-template-columns: 26px 1fr;
 }
<html>
<body>
<form id="form_question_scenario" method="POST" action="" class="question_wrapper">
  <div id="reading_question_assessment_scenario" class="reading_question_assessment_wrapper">

    <div class="reading_assessment_question_scenario">

      <div class="question_counter">
        <p id="question_scenario_count">Scenario 1 of 4</p>
      </div>

      <div class="reading_question_content">
        <p id="display_scenario">
        test
        </p>
      </div>

    </div>

    <div class="reading_assessment_choices">

        <div class="reading_question_scenario">
        <p id="display_question_scenario">
          1. Back in the day, who were the only ones who could vote?
        </p>
        </div>

      <div id="question_choices" class="reading_question_choice">
        <input type="radio" name="answer_choice" value="17">
        <label>Give an extra break in the middle of the afternoon</label>
        <input type="radio" name="answer_choice" value="18">
        <label>to encourage customers to tell their friends and family</label>
        <input type="radio" name="answer_choice" value="19">
        <label>Give an extra break in the middle of the afternoon</label>
        <input type="radio" name="answer_choice" value="20">
        <label>to share the operating hours and swimming lesson schedule</label>
      </div>

        <div class="btn_submit">
            <button id="click" type="submit">Submit</button>
        </div>

    </div>

  </div>

  </form>


</body>
</html>

1

Please add the following 2 styles:

 .answer{
 float:left;
 }

 .answertext{
width:200px;
display:table;
float:left;"
}

and then change the following lines:

        <input type="radio" name="answer_choice" value="17">
        <label>Give an extra break in the middle of the afternoon.</label>
        <input type="radio" name="answer_choice" value="18">
        <label>to encourage customers to tell their friends and family</label>
        <input type="radio" name="answer_choice" value="19">
        <label>Give an extra break in the middle of the afternoon.</label>
        <input type="radio" name="answer_choice" value="20">
        <label>to share the operating hours and swimming lesson schedule</label>

to

        <div class=answer><input type="radio" name="answer_choice" value="18"></div>
        <div class=answertext><label>[TEST] test test to encourage customers to tell their friends and family to encourage customers to tell their friends and family</label></div>

        <div class=answer><input type="radio" name="answer_choice" value="18"></div>
        <div class=answertext><label>[TEST] test test to encourage customers to tell their friends and family to encourage customers to tell their friends and family</label></div>

                <div class=answer><input type="radio" name="answer_choice" value="18"></div>
        <div class=answertext><label>[TEST] test testto encourage customers to tell their friends and family to encourage customers to tell their friends and family</label></div>

                <div class=answer><input type="radio" name="answer_choice" value="18"></div>
        <div class=answertext><label>[TEST] test test to encourage customers to tell their friends and family to encourage customers to tell their friends and family</label></div>

                <div class=answer><input type="radio" name="answer_choice" value="18"></div>
        <div class=answertext><label>[TEST] test test to encourage customers to tell their friends and family to encourage customers to tell their friends and family</label></div>



Note: I have used testing data, please change to suit your needs

1

The label and radio button is enclosed in div tag to specify the row and the radio button is floated left and label is floated right. see the code for example. You can change the width of the label based on the row width and each options can be separated as per need using div[class="choice_row"]class.

html,body{
  overflow: hidden;
  height: 100%;
}

.question_wrapper{

  margin: 0px 40px;
  padding-top: 80px;

}

/* Start Reading Comprehension */

.question_wrapper .reading_question_assessment_wrapper{
  display: flex;
}

.question_wrapper .reading_assessment_question_scenario{
  width: 70%;
  border-right: 2px solid #000000;
  height: 100vh;
  padding-right: 35px;
}

.question_wrapper .reading_assessment_choices{
  width: 30%;
  margin-left: 15px;
}

.question_wrapper .reading_question_content{

  font-style: italic;
  text-align: center;

}


.question_wrapper .reading_question_scenario{

  font-style: italic;
  padding-top: 30px;

}

.question_wrapper label{
  font-style: italic;
  
}

.question_wrapper .reading_question_choice input[type="radio"] {
  margin: 25px 0px 0px 0px;
  transform: scale(1.5);
  float: left;
    position: relative;
    top: 50%;
    margin-top: -11px;
}

.question_wrapper .question_choice input[type="radio"] {
    margin: 25px 0px 0px 0px;
    transform: scale(1.5);
    float: left;
    position: relative;
    top: 50%;
    margin-top: -11px;
}

.question_wrapper input[type="radio"] + label:after {
  content: '';
  display: block;
}

.question_wrapper input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #FAFAFA;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 1px solid #000;
 }

.question_wrapper input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #555;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 1px solid #000;
 }

 .question_wrapper .reading_assessment_choices .reading_question_choice{
   line-height: 1.5em;
 }
 
 #question_choices label{
    float: right;
    position: relative;
    width: calc( 100% - 30px);
    margin-top: -16px;
    top: 50%;
 }
 
 #question_choices .choice_row{
    height : 150px;
 }
<html>
<body>
<form id="form_question_scenario" method="POST" action="" class="question_wrapper">
  <div id="reading_question_assessment_scenario" class="reading_question_assessment_wrapper">

    <div class="reading_assessment_question_scenario">

      <div class="question_counter">
        <p id="question_scenario_count">Scenario 1 of 4</p>
      </div>

      <div class="reading_question_content">
        <p id="display_scenario">
        test
        </p>
      </div>

    </div>

    <div class="reading_assessment_choices">

        <div class="reading_question_scenario">
        <p id="display_question_scenario">
          1. Back in the day, who were the only ones who could vote?
        </p>
        </div>

      <div id="question_choices" class="reading_question_choice">
       <div class="choice_row">
          <input type="radio" name="answer_choice" value="17">
          <label>Give an extra break in the middle of the afternoon.</label>
        </div>
        <div class="choice_row">
          <input type="radio" name="answer_choice" value="18">
          <label>to encourage customers to tell their friends and family</label>
          </div>
        <div class="choice_row">
          <input type="radio" name="answer_choice" value="19">
          <label>Give an extra break in the middle of the afternoon.</label>
          </div>
        <div class="choice_row">
          <input type="radio" name="answer_choice" value="20">
          <label>to share the operating hours and swimming lesson schedule</label>
        </div>
      </div>

        <div class="btn_submit">
            <button id="click" type="submit">Submit</button>
        </div>

    </div>

  </div>

  </form>


</body>
</html>

Not the answer you're looking for? Browse other questions tagged or ask your own question.