How to match baseline in two floating divs


Tags: css,css-float

Problem :

I'm trying to get the CSS sorted for a pager. I have a div floated left for the page numbers, and one floated right for a small form containing controls to set how many items per page are displayed.

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

How do I modify my CSS or HTML so that the text is vertically aligned between the two divs?

This is what it currently looks like:

Screenshot

Also, the text isn't quite centered in each page number. How do I get this to work?

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



Solution :

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

Once you have block elements or floats wrapping the elements that should have the same baseline, you're screwed, and you will have to do the baseline manually by using line-height, margin or padding. Sometimes you can get around this by 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>


    CSS Howto..

    How to change menu from on hover to on click

    How to get @media to take precedence over normal styling

    How to show a div behind navigation on rollover

    How to make android app for existing dynamic website

    How to stop the latter part of javascript from being called?

    How do I apply a max-width to an input field form-control with a trailing secondary button in Bootstrap 3?

    How can I select my font awesome icons in CSS?

    How to set z-index in css background

    How to Convert SASS on the fly to CSS in Python?

    How to make text float on top of an image html css

    How do I resize a div relative to browser window size?

    How to catch this nth-child() with css

    How can I make a drop down menu without changing the width of the main menu item?

    How to convert complex xpath to css

    How to stop CSS selector from selecting all child elements

    How to force input type text within span width

    How to remove the blank between div.sons?

    JavaFx how to align only one column-header in tableview?

    Understanding float and how and when to float an element in CSS3?

    How to center variable length submit buttons?

    How to make a content property in css use php

    How can I center an unknown number of block elements of unknown widths in a block container of an unknown width?

    How to set p margin for a section

    How to remove gap between elements when using CSS3 table-row/header/footer-group in Firefox?

    How to show only the div with id while hiding other divs using CSS only

    How to edit a css file in ASP.NET using C# to change the website design

    How to move the second child in my nav menu with CSS

    How to set z-index in css?

    How to tell google bot to skip part of HTML?

    How does reveal.js resize elements?