Two Tables in one line

[costas]

Hi to all,
I'm wondering how can I put two tables in the same line!
Thanks in advance!

[Twey]

Use:

display: inline;

[djr33]

Would the same apply to divs?

[mburt]

Nope, for divs you have to use:

float:left

[Twey]

The same would apply to divs, yes. There are fundamental differences between floating an element and making it inline.

[djr33]

<div style="display:inline;">testing</div><div style="display:inline;">testing2</div>

Becomes: testingtesting2

Very nice.

Now using divs instead of tables is actually possible without bizarre css stuff, like absolute positioning which doesn't work in many cases anyway. Heh. I wish I'd known this before....


One thing remains, though... could you set the height/width of each of those elements as well?

[Twey]

No. That's where floating comes in. Using display: inline; causes them to be rendered as inline elements, like <span>, whose size and position is dictated by the contents. Floating them, on the other hand, means keeping them as block-level elements, but rather than having them take up all the space on a line, stacks them against one side of the parent element. Try it:

<div style="border: 3px solid blue; float: left; width: 40&#37;; height: 20em;">Testing</div><div style="border: 3px solid red; float: left; width: 40%; height: 20em;">Testing2</div>

[costas]

Hey guys, thanks a lot!

[djr33]

Thanks, Twey. Still seems like it would be a hassle to replace tables, then.

[Twey]

It can be, yes, and there are some layouts that simply can't be done. It's usually easy enough, though.