divs vs tables; overflow without scrollbars

I've been trying to get away from using tables as a layout tool, but I've
just come across what I consider to be a serious liability.
If I specify a width (minimum, really) in a div, such as

#body {
width: 90%;
margin-left: 5%;
margin-right: 5%;
border: 1px solid navy;
padding: 10px;
}

And then I put a table in that div, when the table data gets too large, it
runs outside the box instead of the box expanding. I understand that this is
expected behavior (though IE will indeed expand the box, other browsers
implement the "correct" behavior and either cut off the content or expand it
beyond the box depending on my overflow setting). If I set the overflow to
auto, I get ugly scroll bars. I don't like it.
If I use a table instead, and put a table inside, the containing table
expands.

Is there a way to get that behavior with divs or am I out of luck on this
one?
To clarify, I want a box with a border that usually takes up 90% of the
window, but expands if the content inside is too big to fit. I could use a
table, but would like to use a div/CSS if I can.

TIA

--
--
~kaeli~
Do not taunt Happy Fun Ball!
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

On Tue, 3 Aug 2004 10:22:33 -0500, kaeli <tiny_one (AT) NOSPAM (DOT) comcast.net>
wrote:

I've been trying to get away from using tables as a layout tool, but I've
just come across what I consider to be a serious liability.
If I specify a width (minimum, really) in a div, such as

#body {
width: 90%;
margin-left: 5%;
margin-right: 5%;
border: 1px solid navy;
padding: 10px;
}

If you mean "minimum width" then you really want the min-width
property, but sadly that's not supported in Internet Explorer.

My usual strategy is to either just ignore IE completely and let it
get it "almost right" (normally the content will shove the box out
anyway) or to play some tricks on IE's flakey CSS parser so that it
sees different rules to everything else.

In think in your case the first is the better plan, because at least
then your DIV box will expand to contain whatever you put inside it,
even if it does end up a little wider than what you really wanted.

Up to you, though!

All the best,
-Claire

kaeli <tiny_one (AT) NOSPAM (DOT) comcast.net> wrote:

To clarify, I want a box with a border that usually takes up 90% of the
window, but expands if the content inside is too big to fit. I could use a
table, but would like to use a div/CSS if I can.

Add "display:table" to your #body rules.

--
Spartanicus

In article
<7fgvg0t2j8t8jbnml4bl0vn8ad2dmohtir (AT) news (DOT) spartanicus.utvinternet.ie>,
me (AT) privacy (DOT) net enlightened us with...

kaeli <tiny_one (AT) NOSPAM (DOT) comcast.net> wrote:

To clarify, I want a box with a border that usually takes up 90% of the
window, but expands if the content inside is too big to fit. I could use a
table, but would like to use a div/CSS if I can.

Add "display:table" to your #body rules.

Sweet!!
Excellent.
Worked like a charm, at least in IE6 and NN7. I didn't test other browsers,
as this is an intranet app.

Thanks a lot!

--
--
~kaeli~
Any sufficiently advanced technology is indistinguishable
from magic.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

On Tue, 3 Aug 2004 12:56:04 -0500, kaeli <tiny_one (AT) NOSPAM (DOT) comcast.net>
wrote:

In article
7fgvg0t2j8t8jbnml4bl0vn8ad2dmohtir (...utvinternet.ie>,
me (AT) privacy (DOT) net enlightened us with...
kaeli <tiny_one (AT) NOSPAM (DOT) comcast.net> wrote:

To clarify, I want a box with a border that usually takes up 90% of the
window, but expands if the content inside is too big to fit. I could use a
table, but would like to use a div/CSS if I can.

Add "display:table" to your #body rules.



Sweet!!
Excellent.
Worked like a charm, at least in IE6 and NN7. I didn't test other browsers,
as this is an intranet app.

It worked in IE6?! I've never seen CSS tables work in IE6 before.

I'd verify this for myself, but unfortunately (or perhaps
fortunately!) I'm not using Windows at the moment.

All the best,
-Claire

Claire Tucker <fake (AT) invalid (DOT) invalid> wrote:

kaeli <tiny_one (AT) NOSPAM (DOT) comcast.net> wrote:
me (AT) privacy (DOT) net enlightened us with...
kaeli <tiny_one (AT) NOSPAM (DOT) comcast.net> wrote:

To clarify, I want a box with a border that usually takes up 90% of the
window, but expands if the content inside is too big to fit. I could use a
table, but would like to use a div/CSS if I can.

Add "display:table" to your #body rules.

Worked like a charm, at least in IE6 and NN7. I didn't test other browsers,
as this is an intranet app.

It worked in IE6?! I've never seen CSS tables work in IE6 before.

display: table; is ignored in IE6, but IE6 was already 'working'
because it incorrectly treated the width as a min-width. Hence, only
those browsers that support display: table; actually 'needed' it in
this case.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

Claire Tucker <fake (AT) invalid (DOT) invalid> wrote:

To clarify, I want a box with a border that usually takes up 90% of the
window, but expands if the content inside is too big to fit. I could use a
table, but would like to use a div/CSS if I can.

Add "display:table" to your #body rules.

Sweet!!
Excellent.
Worked like a charm, at least in IE6 and NN7. I didn't test other browsers,
as this is an intranet app.

It worked in IE6?! I've never seen CSS tables work in IE6 before.

No it doesn't work in IE, but the OP was having trouble with "other
browsers", IE already did it's famous "what the author wanted" thing,
and since IE ignores the display:table rule the poor ole thang wasn't
harmed.

--
Spartanicus

In article <11tvg0tr6sbbmf8nhad2btakjqbbg4jc4c (AT) 4ax (DOT) com>, steve (AT) pugh (DOT) net
enlightened us with...

display: table; is ignored in IE6, but IE6 was already 'working'
because it incorrectly treated the width as a min-width. Hence, only
those browsers that support display: table; actually 'needed' it in
this case.

I figured that was the case. Thanks for the clarification.

--
--
~kaeli~
The man who fell into an upholstery machine is fully
recovered.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace