How do I line up two elements without having their content overlap?

laredotornado

unread,

Jan 12, 2012, 9:07:21 AM1/12/12

to

Hi,

I'm using the latest version of Firefox and Chrome on Win XP. I want
to display two tables on the same horizontal plane. However, I'm
having a problem. Right now I have

<table width="100" style="display: inline-block;">
...
</table>
<table width="100" style="display: inline-block;">
...
</table>

Right now, the two tables overlap because the text content of the
first table is bigger than 100 pixels. Without changing the width,
does anyone know how I can change/add to the styles so that the second
table will appear to the right of the first table but clear all of the
first table's contents?

Thanks, - Dave

PS - I know tables are evil. This code was autogenerated by GWT, with
the exception of the styles, which I control.

Jukka K. Korpela

unread,

Jan 12, 2012, 9:36:59 AM1/12/12

to

2012-01-12 16:07, laredotornado wrote:

> I want
> to display two tables on the same horizontal plane. However, I'm
> having a problem.

I just answered the question in the forum where I first saw it asked:

http://stackoverflow.com/questions/8827220/how-do-i-line-up-two-tables-without-having-their-content-overlap/8836781#8836781

--
Yucca, http://www.cs.tut.fi/~jkorpela/

tlvp

unread,

Jan 12, 2012, 1:34:33 PM1/12/12

to

On Thu, 12 Jan 2012 06:07:21 -0800 (PST), laredotornado wrote:

> Hi,
>
> I'm using the latest version of Firefox and Chrome on Win XP. I want
> to display two tables on the same horizontal plane. However, I'm
> having a problem. Right now I have
>
> <table width="100" style="display: inline-block;">
> ...
> </table>
> <table width="100" style="display: inline-block;">
> ...
> </table>
>
> Right now, the two tables overlap because the text content of the
> first table is bigger than 100 pixels. Without changing the width,
> does anyone know how I can change/add to the styles so that the second
> table will appear to the right of the first table but clear all of the
> first table's contents?
>
> Thanks, - Dave

Jukka offers one strictly css-focussed way; another way might be to add

align="left"

into the left-most table's opening <TABLE ... > tag -- as in this ...

--- [SAMPLE] ---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML><HEAD><TITLE>Table Test</TITLE></HEAD>
<BODY>

<table align="left" width="100"><tr><td> far too much stuff to fit </td>
<td> more<br> stuff </td></tr></table>
<table><tr><td> STUFF </td>
<td> more<br> STUFF </td></tr></table>

</BODY></HTML>

--- [end of SAMPLE] ---

(tested only in Safari, but working there; and valid HTML).

HTH. Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

Gus Richter

unread,

Jan 12, 2012, 4:32:18 PM1/12/12

to

On 1/12/2012 9:07 AM, laredotornado wrote:
> Hi,
>
> I'm using the latest version of Firefox and Chrome on Win XP. I want
> to display two tables on the same horizontal plane. However, I'm
> having a problem. Right now I have
>
> <table width="100" style="display: inline-block;">
> ...
> </table>
> <table width="100" style="display: inline-block;">
> ...
> </table>
>
> Right now, the two tables overlap because the text content of the
> first table is bigger than 100 pixels. Without changing the width,
> does anyone know how I can change/add to the styles so that the second
> table will appear to the right of the first table but clear all of the
> first table's contents?

With the information provided, text does not "overlap" but is limited
within the width specified for both tables.

--
Gus

dorayme

unread,

Jan 12, 2012, 6:14:54 PM1/12/12

to

In article
<454f574b-cca4-482a...@m11g2000yqe.googlegroups.co
m>,

laredotornado <laredo...@zipmail.com> wrote:

> Hi,
>
> I'm using the latest version of Firefox and Chrome on Win XP. I want
> to display two tables on the same horizontal plane. However, I'm
> having a problem. Right now I have
>
> <table width="100" style="display: inline-block;">
> ...
> </table>
> <table width="100" style="display: inline-block;">
> ...
> </table>
>
> Right now, the two tables overlap because the text content of the
> first table is bigger than 100 pixels. Without changing the width,
> does anyone know how I can change/add to the styles so that the second
> table will appear to the right of the first table but clear all of the
> first table's contents?
>

<http://dorayme.netweaver.com.au/tableSideBySide.html>

should be OK for FF and many modern browsers. IE is a different
matter and you might, as JK suggests, wrap the tables in DIVs and
maybe something like

<http://dorayme.netweaver.com.au/tableSideBySide2.html>

--
dorayme

Ben C

unread,

Jan 21, 2012, 12:10:41 PM1/21/12

to

On 2012-01-12, laredotornado <laredo...@zipmail.com> wrote:
> Hi,
>
> I'm using the latest version of Firefox and Chrome on Win XP. I want
> to display two tables on the same horizontal plane.

I've actually never once managed to get anything to display in a
different horizontal plane in any browser.

> However, I'm
> having a problem. Right now I have
>
><table width="100" style="display: inline-block;">

Use display: inline-table (although inline-block will also work-- you'll
get an anonymous table inside the inline block).

> ...
></table>
><table width="100" style="display: inline-block;">
> ...
></table>
>
> Right now, the two tables overlap because the text content of the
> first table is bigger than 100 pixels. Without changing the width,
> does anyone know how I can change/add to the styles so that the second
> table will appear to the right of the first table but clear all of the
> first table's contents?

Put white-space: nowrap on the container, and then the two tables will
stay side by side even if it means overflowing the container.