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 delete space in css?

    How to create a specific X*X size table? (Battleship game) (HTML, CSS, JS)

    How to reference embedded images from CSS?

    how to set the child-class height as per the parent div using css

    How do I get a div to fill the width regardless if the brower window is shrunk?

    How do I get these elements to effectively center properly and responsively?

    How do I stick my footer to bottom of the page with Google Chrome?

    how to make a div to wrap two float divs inside?

    CSS Layout. Can not get idea how to fix it

    Navigation bar - How to keep the page highlighted when selected?

    How to override css property?

    How to Change blue background selection color from image using css

    CSS: How to force floating blocks to have equal (100%?) height

    How i can display the output of a rss feed in HTML format in a TWebBrowser?

    What's the proper way to name CSS selectors. It seems inconsistent how it works [duplicate]

    how to remove space from html using bootstrap

    How to apply a CSS class on hover to dynamically generated submit buttons?

    How to find out and get rid of unused CSS code? [closed]

    How to clone an element using class name and append it to the body

    How to cover box shadow?

    how to align the td on top/bottom with css

    How do i make the evenly spread elements in my nav bar not touch the edges of the page?

    How to stop breaking tables border when page is spliting?

    How to align text and images on one line and position those to the left and/or right?

    How do I calculate percentage based on pixels for CSS conversion?

    How to apply nested css using jQuery?

    How to use “all” property in CSS

    CSS: How to change the color of the bottom right square of the scrollbar in webkit?

    How to keep a sticky menu contained inside a floating sidebar?

    How to get Bootstrap's “hero-unit” to fit across the entirety of top section?