Using <DIV> to mimic a bare <TABLE>

[He Shiming]

Hi,

I'm wondering how can I use <DIV> to mimic a <TABLE>.

In a bare <TABLE> without a width attribute, the width of the table get
dynamically expanded according to the content. However, <DIV> doesn't have
the same behavior.

In the CSS of the DIV tag, I have: background: #FF0000; to see the area
covered by <DIV>. It appears that <DIV> covers the entire row even if width
is set to "auto" in CSS (auto = 100%?).

I can put a "float: left;" with "width:auto;" and the width of DIV does
become dynamically expanded. However, the content below the DIV tag will now
attach to the right side of the DIV. How do I put a row break there?

Thanks in advance,
--
He Shiming

[Els]

He Shiming wrote:

I can put a "float: left;" with "width:auto;" and the width of DIV does
become dynamically expanded. However, the content below the DIV tag will now
attach to the right side of the DIV. How do I put a row break there?

"clear:left;" on the following element.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Sade - Your Love Is King

[He Shiming]

Thanks it works.

--
He Shiming

"Els" <el*********@tiscali.nl> wrote in message
news:5q****************************@40tude.net...

He Shiming wrote:

I can put a "float: left;" with "width:auto;" and the width of DIV does
become dynamically expanded. However, the content below the DIV tag will
now
attach to the right side of the DIV. How do I put a row break there?

"clear:left;" on the following element.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Sade - Your Love Is King

[He Shiming]

Well, I've got more problems here.

With clear:left, <DIV> still doesn't behave like <TABLE>. I have the
following DIV structure in the page:

<DIV id="outer">
<DIV id="inner">content</DIV>
<DIV id="inner">content</DIV>
</DIV>

As you recommended, I used the following CSS definition for "inner":

width: auto;
float: left;
clear: left;

The "outer" DIV has a colored border, without "clear:left", the border will
surround the "inner" DIVs. But with "clear:left", the "inner" DIVs went out
of the border and the border became a single line. Any ideas?

--
He Shiming

"Els" <el*********@tiscali.nl> wrote in message
news:5q****************************@40tude.net...

He Shiming wrote:

I can put a "float: left;" with "width:auto;" and the width of DIV does
become dynamically expanded. However, the content below the DIV tag will
now
attach to the right side of the DIV. How do I put a row break there?

"clear:left;" on the following element.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Sade - Your Love Is King

[Els]

He Shiming wrote:

Well, I've got more problems here.

With clear:left, <DIV> still doesn't behave like <TABLE>. I have the
following DIV structure in the page:

<DIV id="outer">
<DIV id="inner">content</DIV>
<DIV id="inner">content</DIV>
</DIV>

As you recommended, I used the following CSS definition for "inner":

width: auto;
width:auto; is superfluous for divs, unless you had previously set a
width for divs and you need to 'undo' it for this div.
float: left;
clear: left;

The "outer" DIV has a colored border, without "clear:left", the border will
surround the "inner" DIVs. But with "clear:left", the "inner" DIVs went out
of the border and the border became a single line. Any ideas?

It's not the clear:left that makes the border not stretch, but the
float:left.
To stretch the border around floats, you'll need to put another
element after the floats, but inside he outer div, with clear:both.
This is only needed for non-IE btw, IE does stretch automatically as
long as you set any height or width to outer.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -