Search code examples
cssinlinetext-align

CSS three inline elements with align from left to right, how to occupy all available width

I have a slider, with a div that contains the controls previous, start/stop sliding, next.

I set "text-align" to left, center and right, respectively, and display to "inline". I have no idea, now, how to fill the whole width.

Here is the markup:

<div id="external_promo_controls">
  <div id="promo_previous"></div>
  <div id="promo_auto_controls"></div>
  <div id="promo_next"></div>
</div>

And the CSS:

#external_promo_controls div{
    display: inline;
}
#promo_previous {text-align: left;}
#promo_auto_controls {text-align: center;}
#promo_next {text-align: right;}

I guess I could have it done with floating elements, however I got quite a mess trying to have a correct combination of elements being on one line and centering the element in the middle. I’d like to avoid positioning elements with pixel value, since it would break as soon as I change text, font, or size or the container, which are all events that will eventually occur.

Solution

  • simple to use floats - this fiddle should set you on the right path:

    http://jsfiddle.net/Q4paq/

    New example with DIVs containg a link with a hover state.

    http://jsfiddle.net/Q4paq/1/