Vertically align right divs if another div to the left causes them to stack

Question

This page has questions on the left, and radio buttons for ranking/scale answers on the right. It's designed so that if the question text is too long too fit in the left pane it just keeps going and pushes the radio buttons down a line beneath the question text. I emphasized if because I want to keep it that way, so it only moves if the text is long, I don't want to set something fixed so that every question does the same thing.

The problem is, the N/A radio button doesn't adjust like the other radio buttons. Is there a way to force it to move down with the others? I've tried surrounding the two sections with a div with vertical align bottom but that didn't work. Maybe I am doing something wrong but whatever I've read with regards to vertically aligning inner divs doesn't seem to accomplish this. Is it possible to fix this?

https://jsfiddle.net/x5y49d0n/

    .qg {
        width: 700px; /* this is only to demonstrate a smaller screen */
        padding-top: 10px;
        margin-top: 0;
    }

    .qg-row {
        margin-left: 10px;
        margin-bottom: 10px;
        overflow: auto;
    }

    .qg-head {
        padding-top: 5px;
        padding-bottom: 5px;
        background-color: #fcfcfc;
    }

    [class*="qg-guide"] {
        font-size: 11px;
        min-height: 10px;
        text-align: center;
        float: left;
    }

    [class*="qg-right-section"] {
        float: right;
        width: 500px;
    }

    .qg-right-section-1 {
        width: 60px;
    }

    .qg-right-section-5 {
        width: 300px;
    }

    [class*="qg-guide-"] {
        word-wrap: break-word;
    }

    .qg-guide-1 {
        empty-cells: hide;
        width: 100%;
        min-width: 100%;
    }

    .qg-guide-5 {
        /* replicate in mobile */
        empty-cells: show;
        width: 20%;
        min-width: 20%;
    }

    .qg-guide-7 {
        empty-cells: show;
        width: 14.28%;
        min-width: 14.28%;
    }

    .qg-label {
        font-size: 13px;
        float: left;
        margin-bottom: 10px;
    }

    [class*="qg-input"] {
        font-size: 11px;
        width: 60px;
        text-align: center;
        float: left;
    }

<div class="qg">
    <div class="qg-table">
        <div class="qg-row qg-head">
            <div class="qg-guide-label"></div>
            <div class="qg-guide qg-right-section-1">
                <div class="qg-guide-1">&nbsp;</div>
            </div>
            <div class="qg-guide qg-right-section-5">
                <div class="qg-guide-7">High7</div>
                <div class="qg-guide-7"></div>
                <div class="qg-guide-7"></div>
                <div class="qg-guide-7">Neutral4</div>
                <div class="qg-guide-7"></div>
                <div class="qg-guide-7"></div>
                <div class="qg-guide-7">Low1</div>
            </div>
        </div>
        <div class="qg-row">
            <div class="qg-label">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</div>
            <div class="qg-guide qg-right-section-1">
                <div class="qg-input-1">
                    <input type="radio" name="0LoMVa" value=""><br>
                    N/A<br>
                </div>
            </div>
            <div class="qg-right-section-5">
                <div class="qg-input-5"><input type="radio" name="0LoMVa" value="5"><br>5<br></div>
                <div class="qg-input-5"><input type="radio" name="0LoMVa" value="4"><br>4<br></div>
                <div class="qg-input-5"><input type="radio" name="0LoMVa" value="3"><br>3<br></div>
                <div class="qg-input-5"><input type="radio" name="0LoMVa" value="2"><br>2<br></div>
                <div class="qg-input-5"><input type="radio" name="0LoMVa" value="1"><br>1<br></div>
            </div>
        </div>
    </div>
</div>
<div class="qg">
    <div class="qg-table">
        <div class="qg-row qg-head">
            <div class="qg-guide-label"></div>
            <div class="qg-guide qg-right-section-1">
                <div class="qg-guide-1">&nbsp;</div>
            </div>
            <div class="qg-guide qg-right-section-5">
                <div class="qg-guide-5 qg-guide-item-0">High0</div>
                <div class="qg-guide-5 qg-guide-item-1"></div>
                <div class="qg-guide-5 qg-guide-item-2">Neutral2</div>
                <div class="qg-guide-5 qg-guide-item-3"></div>
                <div class="qg-guide-5 qg-guide-item-4">Low4</div>
            </div>
        </div>
        <div class="qg-row">
            <div class="qg-label">Far far away, behind the word mountains.</div>
            <div class="qg-guide qg-right-section-1">
                <div class="qg-input-1">
                    <input type="radio" name="W1MkXk" value=""><br>
                    N/A<br>
                </div>
            </div>
            <div class="qg-right-section-5">
                <div class="qg-input-5"><input type="radio" name="W1MkXk" value="5"><br>5<br></div>
                <div class="qg-input-5"><input type="radio" name="W1MkXk" value="4"><br>4<br></div>
                <div class="qg-input-5"><input type="radio" name="W1MkXk" value="3"><br>3<br></div>
                <div class="qg-input-5"><input type="radio" name="W1MkXk" value="2"><br>2<br></div>
                <div class="qg-input-5"><input type="radio" name="W1MkXk" value="1"><br>1<br></div>
            </div>
        </div>
    </div>
</div>

This is what I want it to do:

Also, these questions are created programmatically using a template, so the divs used have to be the same, IOW I can't add a div (with an additional class) to the 1st question that fixes the issue without the 2nd question having the same div. This is the critical requirement which is making it difficult for me to find a solution. Can this be solved?

score 1 · Answer 1 · edited May 23 '17 at 12:30

1

You can achieve the effect you want by adding a clear-fix after the .qg-label class. I did this in the fiddle by manually inserting an empty <div> with the style clear:both;. You could instead use the clear-fix class of your favorite library or create you own such as:

(This is a classic clearfix example from this answer)

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Another solution is to include all radio buttons in the same parent element, give it a fixed width, and add float:right; to it and the radio element children. This should be a simple fix. I showed this in comparison to your original fiddle here - fiddle.

edited May 23 '17 at 12:30

Community

1
1

answered Mar 27 '16 at 19:29

robertdavid

393
4
15

I'm not sure if this is right but I did what you suggested (https://jsfiddle.net/x5y49d0n/2/) and what happens is, it drops the radio buttons down on all questions regardless of wether or not they do fit side by side. So in this particular fiddle, both radio button areas are lower when I only want the 1st one to be lower (because it's associated question doesn't fit to the left without wrapping). I added the clearfix div to both questions because this page is built programmatically and each question uses a template, so they're the same. Did I do something wrong? – sds Mar 28 '16 at 03:08
I was able to create the effect you are looking for. I put all radio buttons in the same container div, and changed `float` to right, and increased the width of the parent container. If this doesn't work with some scripted output of the markup, then perhaps you will need a more complex solution. This is pretty much the simplest way I can think of to do it at the moment, you can change the order of the radio buttons as needed. [link](https://jsfiddle.net/robertdavid01/sxdch7z8/) – robertdavid Apr 04 '16 at 13:22
When I view your fiddle, the radio button for 1 in the first question is dropped down a line on the right. Is it the same on your browser? – sds Aug 30 '16 at 19:28
I do see that now that you mention it. I have time to look later on if you still haven't solved it. – robertdavid Sep 11 '16 at 09:31
Hi @robertdavid, just wondering if you had a chance to look at this again. – sds Dec 08 '16 at 18:27
unfortunately not. have not had space to get into looking at a specific implementation of my own to sort out the whole issue... – robertdavid Dec 13 '16 at 13:57

score 1 · Accepted Answer · answered Mar 28 '16 at 05:46

Is it possible to change DOM structure?? If yes then just try pushing

<div class="qg-guide qg-right-section-1"></div> inside

<div class="qg-guide qg-right-section-5">

code

        <div class="qg-row qg-head">
            <div class="qg-guide-label"></div>
            <div class="qg-guide qg-right-section-5">
                <div class="qg-guide-5 qg-guide-item-0">High0</div>
                <div class="qg-guide-5 qg-guide-item-1"></div>
                <div class="qg-guide-5 qg-guide-item-2">Neutral2</div>
                <div class="qg-guide-5 qg-guide-item-3"></div>
                <div class="qg-guide-5 qg-guide-item-4">Low4</div>

                <div class="qg-guide qg-right-section-1">
                  <div class="qg-guide-1">&nbsp;</div>
                </div>
            </div>
        </div>

and change css

.qg-right-section-5 {
    width: 360px;
}
.qg-right-section-1 {
 width: 60px;
 float: left;
}

Like this - https://jsfiddle.net/x5y49d0n/3/ If that's what has to be done, if there's no css solution, I can look at that approach, although I already did and it wasn't possible without substantial code changes. If you think of a css change based solution please let me know. Thanks. — sds, Mar 28 '16 at 18:24
Without changing you DOM structure. try changing `.qg-right-section-1 { width: 60px; position: absolute; right: 0; bottom: 0; }` `.qg-right-section-5 { width: 300px; margin-right: 60px; }` and set `.qg-row` as `position:relative`. This may solve your problem by just changing css. But not sure whether this one is good solution or not. — Nikita Ag, Mar 30 '16 at 12:37

Vertically align right divs if another div to the left causes them to stack

2 Answers2