Question

I am trying to achieve the following Layout:

 +--------------------+  +-------------------+ +--------------------+ 
 | Right column with  |  | small center with | | Right column with  |
 | multiple lines and |  | fixed width       | | multiple lines and | 
 | width of           |  |                   | | width of           |
 | (100%-center)/2    |  |                   | | (100%-center)/2    |
 +--------------------+  +-------------------+ +--------------------+ 

but with my current markup, instead of introducing line-break inside the itself the right column will move below the rest once it’s content becomes too big to fit the line:

 +--------------------+  +-------------------+ 
 | Right column with  |  | small center with | 
 | multiple lines and |  | fixed width       | 
 | width of           |  |                   | 
 | (100%-center)/2    |  |                   | 
 +--------------------+  +-------------------+ 

 +-------------------------------------------+ 
 | Right column with multiple lines and...   |
 +-------------------------------------------+ 

This is my current markup:

<div style="text-align: center;">
    <span style="float: left;">left</span>
    <span>center</span>
    <span style="float: right;">right</span>
</div>

How can I achieve the desired layout? Thanks!

Answer 1

You can do this without modifying your markup:

.container {
    display: table;
}
.container span {
    display: table-cell;
}

<div class="container">
    <span>left</span>
    <span>center</span>
    <span>right</span>
</div>

http://jsfiddle.net/R3X4q/