How to match baseline in two floating divs

Question

I am trying to get CSS sorted for a pager. I have a div placed on the left for page numbers, and one floating on the right for a small form containing controls to determine the number of elements on the page.

When the page is in full size, the divs are far enough apart, it doesn’t really matter, but when the page changes so that the divs are almost touching, it’s noticeable.

How to change my CSS or HTML so that the text is vertically aligned between two divs?

Currently it looks like this:

In addition, the text does not matter much in every page number. How do I make this work?

Matching CSS:

ol.mini-form { margin: 0; padding: 0; } ol.mini-form li { display: inline; } ol.pager-pages { margin: 0.5em 0; padding: 0.5em 0; float: left; } ol.pager-pages li { padding: 0.4em; margin: 0.1em; border: 1px solid #ccc; text-align: center; } ol.pager-result { padding: 0.4em; float: right; } 

HTML:

 <div> <ol class="mini-form pager-pages"> <li> <a href="...">1</a> </li> <li> <a href="...">2</a> </li> <li> <a href="...">3</a> </li> </ol> <form action="..." method="get"> <ol class="mini-form pager-result"> <li> <select name="PageSize"> <option value="5">5</option> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="50">50</option> </select> </li> <li> per page </li> <li> <input type="submit" value="Set" /> </li> </ol> </form> <div style="clear: both;"></div> </div> 

Thanks.

Answer 1

Does this work for you? http://jsfiddle.net/xPk9g/

After you lock elements or floats wrapping elements that must have the same baseline, you are screwed in and you have to manually execute the baseline using height, margin, or indentation. Sometimes you can get around this using display: inline-block .

 ol, li, form { display: inline-block; } ol.mini-form { margin: 0; padding: 0; } ol.pager-pages { margin: 0.5em 0; padding: 0.5em 0; width: 48%; } ol.pager-pages li { padding: 0.4em; margin: 0.1em; border: 1px solid #ccc; text-align: center; } form { width: 45%; text-align:right; } ol.pager-result { padding: 0.4em; } 

 <div> <ol class="mini-form pager-pages"> <li> <a href="...">1</a> </li> <li> <a href="...">2</a> </li> <li> <a href="...">3</a> </li> </ol> <form action="..." method="get"> <ol class="mini-form pager-result"> <li> <select name="PageSize"> <option value="5">5</option> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="50">50</option> </select> </li> <li> per page </li> <li> <input type="submit" value="Set" /> </li> </ol> </form> </div> 

Answer 2

In the selection, input, button, textarea element, you can achieve the best alignment using the following rules:

vertical-align: baseline; margin: 0;

IE6 / 7 *vertical-align: middle