Change from table to div/span

[martinjcole]

I am trying to get rid of tables in one of my pages, and can't seem to figure out how to do this with div and span.

The current_buffer div has content dynamically loaded.

The thing I like about the table cells is that they grow as needed, and I never have figured out how to make a span do that.

<table>
	<tr>
		<td valign="top">
			<button id="show_buffer" style="width: 200px;" class="ui-state-default ui-corner-all">Show Current Buffer</button><br />
			<button id="refresh_buffer" style="width: 200px;" class="ui-state-default ui-corner-all">Refresh Current Buffer</button>
		</td>
		<td><div id="current_buffer"></div></td>
	</tr>
</table>

Regards
Marts

[David Laakso]

CSS deals with the look and formatting of content. Not behavior.

[martinjcole]

Thanks for the comment, however I did find what I needed.

inline-block what a useful display style...

<div>
    <div style="display: inline-block; vertical-align: top;">
            <button value="show" id="show_buffer" style="display: block; width: 200px; cursor: pointer;" class="ui-state-default ui-corner-all">Show Current Buffer</button>
            <button id="refresh_buffer" style="display: block; width: 200px; cursor: pointer;" class="ui-state-default ui-corner-all">Refresh Current Buffer</button>
			<hr/>
            <button id="buffer_to_excel" style="display: block; width: 200px; cursor: pointer;" class="ui-state-default ui-corner-all">Export to Excel</button>
    </div>
	<div style="display: inline-block;">
	    <div id="current_buffer"></div>
	</div>
</div>

[David Laakso]

If it is working for you in a dynamically generated content setting then why not? Currently inline-block cross-browser support is rather poor, particularly among IE/7 and IE/6 (will be supported for IE/8) and not supported at all in FF/2 ver and down. You may need to attach a scripting fix if you need full support...