Search code examples
htmlcssvertical-alignment

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

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>

enter image description here

This is what I want it to do:

enter image description here

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?

Solution

  • 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;
}