Better way positioning radiobox elements

Question

I'm relatively new to HTML and CSS. I'm trying to build a simple form on the web. I've placed my radio boxes side-by-side by hardcoding its location in the CSS. I am wondering if there's a better of doing this rather than hardcoding it?

.div2 {
  border-radius: 1px;
  border-style: dashed;
  border-color: grey;
  background-color: white;
  padding: 10px;
  width: 300px;
}

.div3 {
  border-radius: 1px;
  border-style: dashed;
  border-color: grey;
  background-color: white;
  padding: 10px;
  width: 300px;
  position: relative;
  left: 320px;
  bottom: 184px;
}

<div class="div2">
  <p>Overall Result:</p>
  <input type="radio" name="Direction" value="north">
  <label for="direction1">Quality!</label><br>

  <input type="radio" name="Direction" value="south">
  <label for="direction2">Excellent!</label><br>

  <input type="radio" name="Direction" value="east">
  <label for="direction3">Good!</label><br>

  <input type="radio" name="Direction" value="west">
  <label for="direction4">Unsatisfactory</label>
  <br>
  <input type="radio" name="Direction" value="weast">
  <label for="direction5">Require Improvements</label>
</div>

<div class="div3">
  <p>Risk Evaluation :</p>
  <input type="radio" name="Direction" value="north">
  <label for="direction1">Severe</label><br>

  <input type="radio" name="Direction" value="south">
  <label for="direction2">High</label><br>

  <input type="radio" name="Direction" value="east">
  <label for="direction3">Medium</label><br>

  <input type="radio" name="Direction" value="west">
  <label for="direction4">Low</label>
  <br>
  <input type="radio" name="Direction" value="weast">
  <label for="direction5">Insignificant</label>
</div>

I am unsure what kind of better way, you're looking for. but as you added the `php` tag so I am assuming you're using php language and in php, you can create an array with options `value` and `name` in key, value pair, then you can do `for` loop and create your radio box list. — Vijay Hardaha, Sep 26 '22 at 07:31
What do you mean by "better way"? What do you want to achieve by that? — Nico Haase, Sep 26 '22 at 07:38
Is it just me, or is your actual question very little about radio buttons, and actually just about getting two div elements next to each other ...? https://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other — CBroe, Sep 26 '22 at 07:48

GreyRoofPigeon · Answer 1 · 2022-09-26T07:46:11.780

A solution could be to use a flexbox. You then however need a parent element.

More info about that here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  display: flex;
}
.div2,
.div3 {
  border-radius: 1px;
  border-style: dashed;
  border-color: grey;
  background-color: white;
  padding: 10px;
  width: 300px;
}

<div class="parent">
  <div class="div2">
    <p>Overall Result:</p>
    <input type="radio" name="Direction" value="north">
    <label for="direction1">Quality!</label><br>

    <input type="radio" name="Direction" value="south">
    <label for="direction2">Excellent!</label><br>

    <input type="radio" name="Direction" value="east">
    <label for="direction3">Good!</label><br>

    <input type="radio" name="Direction" value="west">
    <label for="direction4">Unsatisfactory</label>
    <br>
    <input type="radio" name="Direction" value="weast">
    <label for="direction5">Require Improvements</label>
  </div>



  <div class="div3">
    <p>Risk Evaluation :</p>
    <input type="radio" name="Direction" value="north">
    <label for="direction1">Severe</label><br>

    <input type="radio" name="Direction" value="south">
    <label for="direction2">High</label><br>

    <input type="radio" name="Direction" value="east">
    <label for="direction3">Medium</label><br>

    <input type="radio" name="Direction" value="west">
    <label for="direction4">Low</label>
    <br>
    <input type="radio" name="Direction" value="weast">
    <label for="direction5">Insignificant</label>
  </div>
</div>

As alternative, you can use float: left for that:

.div2, .div3 {
  border-radius: 1px;
  border-style: dashed;
  border-color: grey;
  background-color: white;
  padding: 10px;
  width: 300px;
  float: left;
}

<div class="div2">
  <p>Overall Result:</p>
  <input type="radio" name="Direction" value="north">
  <label for="direction1">Quality!</label><br>

  <input type="radio" name="Direction" value="south">
  <label for="direction2">Excellent!</label><br>

  <input type="radio" name="Direction" value="east">
  <label for="direction3">Good!</label><br>

  <input type="radio" name="Direction" value="west">
  <label for="direction4">Unsatisfactory</label>
  <br>
  <input type="radio" name="Direction" value="weast">
  <label for="direction5">Require Improvements</label>
</div>



<div class="div3">
  <p>Risk Evaluation :</p>
  <input type="radio" name="Direction" value="north">
  <label for="direction1">Severe</label><br>

  <input type="radio" name="Direction" value="south">
  <label for="direction2">High</label><br>

  <input type="radio" name="Direction" value="east">
  <label for="direction3">Medium</label><br>

  <input type="radio" name="Direction" value="west">
  <label for="direction4">Low</label>
  <br>
  <input type="radio" name="Direction" value="weast">
  <label for="direction5">Insignificant</label>
</div>

Flexbox is the right solution here and should be on top. `float` is for floating an element within a text block that does not apply here. As such it would be inappropriate usage and shouldn't even be taught because of the wrong usage. — tacoshy, Sep 26 '22 at 07:38
PS: as a proper improvement for the OP his markup should be changed. Instead of using a paragraph as a label or title for the box, a headline should be sued or a fieldset with legend. — tacoshy, Sep 26 '22 at 07:41
Good point about the both solutions. I've changed that. For the further markup, yes there is room for improvement. — GreyRoofPigeon, Sep 26 '22 at 07:58

score -2 · Answer 2 · answered Sep 26 '22 at 07:31

-2

Create HTML table with two TDs

<TABLE>
  <TR>
    <TD>1st group of radioboxes</TD>
    <TD>2nd group of radioboxes</TD>
  </TR>
</TABLE>

answered Sep 26 '22 at 07:31

sbrbot

6,169
6
43
74

3

It is not tabular data and as such a table would be the wrong tool to use here – tacoshy Sep 26 '22 at 07:35

Better way positioning radiobox elements

2 Answers2