Question

I have three divs in a container:

<div id="container">
  <h2>Heading</h2>

  <div id="left">
    An image goes here.
  </div>

  <div id="center">
    Lorem ipsum whatever.
  </div>

  <div id="right">
    <ul>
      <li>Example</li>
      <li>Example</li>
      <li>Example</li>
    </ul>
  </div>
</div>

I’d like to have the three inner divs next to each other and aligned
vertically. Using float: left and float: right for the left and
right div requires to change the order of divs and have center at
the end, which is not possible for me.

How can I achieve the following with CSS and this div structure:

Answer 1

In css, use display:inline-block to align vertically,

Here the demo: http://jsfiddle.net/muthkum/BEHdu/1/

#left, #center, #right{
    display:inline-block; 
    *display:inline; /*IE7 fix*/
    zoom:1;
    padding:5px; 
    border: 1px solid #000; 
    vertical-align:middle;
}
#left{
    width:50px; /*Remove or Increase the width if needed*/
}

#center{
    /*SET WIDTH HERE*/
}

#left{
    /*SET WIDTH HERE*/
}