CSS to align 3 HTML elements with no access to the HTML

Question

Unfortunately I only have the ability to view the HTML but I am able to edit the CSS

There are 3 elements (but 4 div's) that can be see from the browser

I've put them with a border to make them clear. Click to View

<li id="area--5F43005:RESOCCHAZ--5F1" class="row">
    <fieldset>
        <div class="col_question">
            4. As part of your occupation, do you work at etc. ect. 
        </div>

        <div class="holder">
            <input type="hidden" name="43005:RESOCCHAZ--5F1_life_1" id="trigger_43005:RESOCCHAZ--5F1_life_1" value="true">

            <div class="col_answer" id="answ_43005:RESOCCHAZ--5F1_life_1">
                No&nbsp;
            </div>

            <div class="col_select">
                <input id="btn_true_43005:RESOCCHAZ--5F1_life_1" name="btn_true_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="submit">
                <input id="btn_false_43005:RESOCCHAZ--5F1_life_1" name="btn_false_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="button" value="no">
           </div>
        </div>
    </fieldset>
</li>

I want the 3 elements to be the same width and side by side as to save space at the top/bottom.

The 3 elements would have to keep the same ratio regardless of the length of the Question/text

Here is my CSS

.col_question{
display: inline-block;
border-style: groove;
padding:6px;
}

.col_answer{
display: inline-block;
border-style: groove;
padding:6px;
}

.col_select{
border-style: groove;
padding:6px;
}

fieldset{
border:none;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-before: 0px;
-webkit-padding-start: 0px;
-webkit-padding-end:0px;
-webkit-padding-after:0px;
min-width:0px;
}

I've tried various CSS elements but none seem to work. Starting to wonder if its a parent ol, div or container element that need the CSS element added.

Maybe you could provide a working Stack Snippet instead of an image? — domsson, Jun 13 '17 at 13:37
check out [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), particularly the `flex-direction: horizontal` section. — marcellothearcane, Jun 13 '17 at 13:39
also, you need the original selector not just a prefixed one - you'd need to put `padding-after` as well as `-webkit-padding-after`. And you can concatenate margin and padding with `padding: top right bottom left;`. See [this](https://www.w3schools.com/css/css_margin.asp#div-gpt-ad-1493883843099-0) for more info... — marcellothearcane, Jun 13 '17 at 13:42
I'll check out flexbox thanks. What or how does a Stack Snippet work ? — Kevin, Jun 13 '17 at 13:46

score 1 · Accepted Answer · answered Jun 13 '17 at 13:56

oldschool solution would be to use float:left;width:33.33% also use box-sizing:border-box to incorporate the border inside the element's width

see snippet below and/or > fiddle

li {
 list-style:none
}
.col_question{
display: inline-block;
border-style: groove;
padding:6px;
float:left;width:33.33%;
box-sizing:border-box;
}

.col_answer{
display: inline-block;
border-style: groove;
box-sizing:border-box;
padding:6px;
float:left;width:33.33%;
}

.col_select{
border-style: groove;
padding:6px;
float:left;width:33.33%;
box-sizing:border-box;
}

fieldset{
border:none;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-before: 0px;
-webkit-padding-start: 0px;
-webkit-padding-end:0px;
-webkit-padding-after:0px;
min-width:0px;

}

<li id="area--5F43005:RESOCCHAZ--5F1" class="row">
    <fieldset>
        <div class="col_question">
            4. As part of your occupation, do you work at etc. ect. 
        </div>

        <div class="holder">
            <input type="hidden" name="43005:RESOCCHAZ--5F1_life_1" id="trigger_43005:RESOCCHAZ--5F1_life_1" value="true">

            <div class="col_answer" id="answ_43005:RESOCCHAZ--5F1_life_1">
                No&nbsp;
            </div>

            <div class="col_select">
                <input id="btn_true_43005:RESOCCHAZ--5F1_life_1" name="btn_true_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="submit">
                <input id="btn_false_43005:RESOCCHAZ--5F1_life_1" name="btn_false_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="button" value="no">
           </div>
        </div>
    </fieldset>
</li>

score 1 · Answer 2 · answered Jun 13 '17 at 14:10

Unfortunately, fieldset cannot be defined as a flexbox (28078681) so I used a float for the column with the question. Hope this helps.

fieldset {
  padding: 0;
  border: none;
}

.holder {
  display: flex;
}

li {
  list-style: none;
}

.col_question,
.col_answer,
.col_select {
  border-style: groove;
}

.col_question {
  max-width: 60%;
  float: left;
}

<li id="area--5F43005:RESOCCHAZ--5F1" class="row">
  <fieldset>
    <div class="col_question">
      4. As part of your occupation, do you work at etc. ect.
    </div>

    <div class="holder">
      <input type="hidden" name="43005:RESOCCHAZ--5F1_life_1" id="trigger_43005:RESOCCHAZ--5F1_life_1" value="true">

      <div class="col_answer" id="answ_43005:RESOCCHAZ--5F1_life_1">
        No&nbsp;
      </div>

      <div class="col_select">
        <input id="btn_true_43005:RESOCCHAZ--5F1_life_1" name="btn_true_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="submit">
        <input id="btn_false_43005:RESOCCHAZ--5F1_life_1" name="btn_false_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="button" value="no">
      </div>
    </div>
  </fieldset>
</li>

score 0 · Answer 3 · answered Jun 13 '17 at 14:22

The biggest problem here is that fieldset cannot have flexbox applied to it. If you could change the fieldset to a different tag type, you could easily use flexbox with flex-grow to achieve this. For now, you may have to play with the numbers and padding/margins, but this approach will work:

.col_question {
   display: inline-block;
   width: 32vw;
}

.holder {
   display: inline-block;
}

.col_answer {
   display: inline-block;
   width: 32vw;
}

.col_select {
   display: inline-block;
   width: 32vw;
}

score 0 · Answer 4 · answered Jun 13 '17 at 14:36

Most easiest way is by display - table and table-cell.

JS Fiddle: https://jsfiddle.net/Dhruvil21_04/9rzdu1pp/2/

* {
    box-sizing: border-box;
}
li {
  list-style-type: none;
}
.col_question{
    display: inline-block;
    border-style: groove;
    padding:6px;
    display: table-cell;
    width: 33.33%;
}

.col_answer{
display: inline-block;
border-style: groove;
padding:6px;
}

.col_select{
border-style: groove;
padding:6px;
}

fieldset{
border:none;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-before: 0px;
-webkit-padding-start: 0px;
-webkit-padding-end:0px;
-webkit-padding-after:0px;
min-width:0px;
display: table;
 width: 100%;
}
.holder {
    display: table-cell;
    width: 66.66%;
}
.holder > div {
    width: 50%;
    display: inline-block;
    margin: 0;
    float: left;
}

<li id="area--5F43005:RESOCCHAZ--5F1" class="row">
    <fieldset>
        <div class="col_question">
            4. As part of your occupation, do you work at etc. ect. 
        </div>

        <div class="holder">
            <input type="hidden" name="43005:RESOCCHAZ--5F1_life_1" id="trigger_43005:RESOCCHAZ--5F1_life_1" value="true">

            <div class="col_answer" id="answ_43005:RESOCCHAZ--5F1_life_1">
                No&nbsp;
            </div>

            <div class="col_select">
                <input id="btn_true_43005:RESOCCHAZ--5F1_life_1" name="btn_true_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="submit">
                <input id="btn_false_43005:RESOCCHAZ--5F1_life_1" name="btn_false_43005:RESOCCHAZ--5F1_life_1" class="ure_btn" type="button" value="no">
           </div>
        </div>
    </fieldset>
</li>

CSS to align 3 HTML elements with no access to the HTML

4 Answers4