View Full Version : my blocks won't inline

10-26-2006, 06:39 PM
I'm trying to make a header and a table within a div appear on the same line, like so:


<h2 style="display:inline">Header</h2>

<div style="display:inline; border: 1px solid red; padding: 10px;">
<table style="background-color: yellow">
<tr><td>Table data</td></tr>


But the IE result has the table below the header, and the Firefox version is even more broken.

If I make table inline as well, I can make them appear on the same line, but I don't understand why. If I've inlined the div, shouldn't I be free to put all the block elements I want in it?

10-26-2006, 07:06 PM
Inline-level (text-like) elements may not contain block-level elements; if you try to do that it results in unpredictable behavior. A table element is a special type of block-level element. You can use float: left (or float: right) on both elements to have block-level elements display on the same line.

To do what you’re trying to do via the display property requires CSS 2.1 values that neither Firefox nor Internet Explorer support: display: inline-block on the header and display: inline-table on the table. That would format them as special inline-level block elements (block-level elements that behave as text) that would flow on the same line (assuming that there’s enough room).

Actually, you wouldn’t need display: inline-block for the header element unless you wanted to apply block-level properties such as width, height, or margin to it; display: inline would work fine for that element.

10-27-2006, 02:55 AM
Thank you, I figured I must misunderstand something fundamental.