如果左侧的另一个div导致它们堆叠，则将div垂直对齐

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?

Answer 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.

Answer 2

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