The best solution I found so far was:
http://jsfiddle.net/kizu/UUzE9/
But that wasn't quite it. You see, I have three columns; two of which need to avoid being explicitly sized. Well, the second one does need to be sized; but not quite.
Allow me to clarify by establishing the conditions I've been trying to meet.
- All three columns have fixed height: 65px, to be precise.
- The first column's width is set to 285px.
- The center column has no size defined; it simply takes up whatever space is left.
- The right column will size itself to whatever content is in there. There is no size explicitly set, it simply resizes based on content, leaving the center column to take up whatever space is left.
- There is no whitespace above, below, and in between each column.
The end result would roughly look something like this:
Logo | Player | Name -----------------------------------------------------
For tables, I'd have simply done this:
<table width="100%" height="65px" cellspacing=0 cellpadding=0>
<tr>
<td width="285px" height="65px">
Logo
</td>
<td height="65px">
Player
</td>
<td width="1px" height="65px">
Account
</td>
</tr>
</table>
Result of above table code: http://jsfiddle.net/zMNYb/
But I'm trying to move away from using tables and using a DIV-based layout. Any ideas?
You will also need to put "display:inline;" as a div normally displays in block form. Without the inline it will appear as three rows and not three columns.
This can also be achieved by nested div concept. All you need to do is divide the div section which you want as 3 columns as follows
Please go through How to create 3 column layout using css div to know more about this.
You can adjust width % as required.
You can do this by using
float:left
for first column,float:right
for the last column and making the center columnfloat:none
Updated Demo: http://jsfiddle.net/L85rp/3/
HTML
CSS
NOTE: It is necessary to place your right column before your center column in HTML (see above, col3 comes before col2 in the HTML) to make sure that when the browser renders the center column, it knows how to render correctly around the existing floating elements.
Updated CSS
Updated demo: http://jsfiddle.net/ew65G/1/