I've a bit of a dilemma. I originally had my site setup using tables for
design purposes. It worked fine, but reading online more and more about CSS
standards relating to FF and IE and especially with IE7 on it's way, I felt
it appropriate to eliminate much of the tables (except for listed data) and
deal with CSS.

Well, dealing I've done, but as it has been claimed that CSS can do anything
Tables can, I think I have to beg to differ and hope someone can prove me
wrong. :)

Problem:
760px container centered in page with 100% height. No problem.
3 DIV children inside container as rows (header, menu, body).
In the body, I may have a table dynamically listing data with unknown cell
widths and nowrap used and desired.

Let's say that table expands to 900px for whatever reason. I would like the
container to expand (which it does), but so too the other children DIVs
(which don't). It was my expectation that all children DIVs without any
specified CSS tags (such as float or width...) would fill the container
wide-ways.

I've seen a lot of liquid CSS designs out there with columns expanding and
contracting based on %, but I haven't been able to see anything like this.

Any ideas/suggestions/comments/solutions/questions/(etc...)?

Thanks,
Nathan

Re: CSS Expanding Children For Nested DIVs by Murray

Murray
Tue Oct 25 06:40:01 CDT 2005

> Well, dealing I've done, but as it has been claimed that CSS can do
> anything
> Tables can, I think I have to beg to differ and hope someone can prove me
> wrong. :)

If you are reading people that are saying that, then stop reading them.

> Let's say that table expands to 900px for whatever reason. I would like
> the
> container to expand (which it does), but so too the other children DIVs
> (which don't). It was my expectation that all children DIVs without any
> specified CSS tags (such as float or width...) would fill the container
> wide-ways.

They will if they do not have an assigned width.

--
Murray
============

"Nathan" <Nathan@discussions.microsoft.com> wrote in message
news:0F3CD67C-697F-40EC-9844-598FFCE991FA@microsoft.com...
> I've a bit of a dilemma. I originally had my site setup using tables for
> design purposes. It worked fine, but reading online more and more about
> CSS
> standards relating to FF and IE and especially with IE7 on it's way, I
> felt
> it appropriate to eliminate much of the tables (except for listed data)
> and
> deal with CSS.
>
> Well, dealing I've done, but as it has been claimed that CSS can do
> anything
> Tables can, I think I have to beg to differ and hope someone can prove me
> wrong. :)
>
> Problem:
> 760px container centered in page with 100% height. No problem.
> 3 DIV children inside container as rows (header, menu, body).
> In the body, I may have a table dynamically listing data with unknown cell
> widths and nowrap used and desired.
>
> Let's say that table expands to 900px for whatever reason. I would like
> the
> container to expand (which it does), but so too the other children DIVs
> (which don't). It was my expectation that all children DIVs without any
> specified CSS tags (such as float or width...) would fill the container
> wide-ways.
>
> I've seen a lot of liquid CSS designs out there with columns expanding and
> contracting based on %, but I haven't been able to see anything like this.
>
> Any ideas/suggestions/comments/solutions/questions/(etc...)?
>
> Thanks,
> Nathan



Re: CSS Expanding Children For Nested DIVs by Kevin

Kevin
Tue Oct 25 06:41:43 CDT 2005

Start here:

http://www.webreference.com/authoring/style/sheets/layout/advanced/

After going thorough that, you may want to follow the links in the page.

--
HTH,

Kevin Spencer
Microsoft MVP
.Net Developer
A watched clock never boils.

"Nathan" <Nathan@discussions.microsoft.com> wrote in message
news:0F3CD67C-697F-40EC-9844-598FFCE991FA@microsoft.com...
> I've a bit of a dilemma. I originally had my site setup using tables for
> design purposes. It worked fine, but reading online more and more about
> CSS
> standards relating to FF and IE and especially with IE7 on it's way, I
> felt
> it appropriate to eliminate much of the tables (except for listed data)
> and
> deal with CSS.
>
> Well, dealing I've done, but as it has been claimed that CSS can do
> anything
> Tables can, I think I have to beg to differ and hope someone can prove me
> wrong. :)
>
> Problem:
> 760px container centered in page with 100% height. No problem.
> 3 DIV children inside container as rows (header, menu, body).
> In the body, I may have a table dynamically listing data with unknown cell
> widths and nowrap used and desired.
>
> Let's say that table expands to 900px for whatever reason. I would like
> the
> container to expand (which it does), but so too the other children DIVs
> (which don't). It was my expectation that all children DIVs without any
> specified CSS tags (such as float or width...) would fill the container
> wide-ways.
>
> I've seen a lot of liquid CSS designs out there with columns expanding and
> contracting based on %, but I haven't been able to see anything like this.
>
> Any ideas/suggestions/comments/solutions/questions/(etc...)?
>
> Thanks,
> Nathan



Re: CSS Expanding Children For Nested DIVs by Nathan

Nathan
Tue Oct 25 11:31:15 CDT 2005

Kevin, that was a good link that I had not yet seen. One thing I had seen
before was the reference to use 'em' instead of '%' with regard to width, but
it was a better explanation here, though I have to say it did not help my
situation.

Where it did help was an issue I was going to present later and that was the
menu section. I had 3 separate elements and if I floated them (one being to
the right) and changed the font size, they would wrap.
If I went with a display:inline and nowrap, it would have been fine, but the
rightmost element wouldn't have been at the rightmost edge of the container.
But that 'em' for width works.

The reason I wouldn't want my layout to mimic what was used on their site is
because of void. I may have a page that has content best viewed at an 800
width resolution and if a user had a 1280 or 1600 resolution, there would be
a large void. I'd like it to start small and expand as needed.

If you have anything else to offer, I'm wide open. And again, thanks for
your input.
Nathan


"Kevin Spencer" wrote:

> Start here:
>
> http://www.webreference.com/authoring/style/sheets/layout/advanced/
>
> After going thorough that, you may want to follow the links in the page.
>
> --
> HTH,
>
> Kevin Spencer
> Microsoft MVP
> ..Net Developer
> A watched clock never boils.
>
> "Nathan" <Nathan@discussions.microsoft.com> wrote in message
> news:0F3CD67C-697F-40EC-9844-598FFCE991FA@microsoft.com...
> > I've a bit of a dilemma. I originally had my site setup using tables for
> > design purposes. It worked fine, but reading online more and more about
> > CSS
> > standards relating to FF and IE and especially with IE7 on it's way, I
> > felt
> > it appropriate to eliminate much of the tables (except for listed data)
> > and
> > deal with CSS.
> >
> > Well, dealing I've done, but as it has been claimed that CSS can do
> > anything
> > Tables can, I think I have to beg to differ and hope someone can prove me
> > wrong. :)
> >
> > Problem:
> > 760px container centered in page with 100% height. No problem.
> > 3 DIV children inside container as rows (header, menu, body).
> > In the body, I may have a table dynamically listing data with unknown cell
> > widths and nowrap used and desired.
> >
> > Let's say that table expands to 900px for whatever reason. I would like
> > the
> > container to expand (which it does), but so too the other children DIVs
> > (which don't). It was my expectation that all children DIVs without any
> > specified CSS tags (such as float or width...) would fill the container
> > wide-ways.
> >
> > I've seen a lot of liquid CSS designs out there with columns expanding and
> > contracting based on %, but I haven't been able to see anything like this.
> >
> > Any ideas/suggestions/comments/solutions/questions/(etc...)?
> >
> > Thanks,
> > Nathan
>
>
>

Re: CSS Expanding Children For Nested DIVs by Nathan

Nathan
Tue Oct 25 11:44:06 CDT 2005

Ahh Murray, everyone has a right to their own opinion as long as it is
validated with reason.
I looked a little more online and found a harsh link that so very much
opposed the use of CSS-P which frustrated me and almost got me to switch back
to Table layout. The site had references out the yin-yang and even a somewhat
recent link that I had read before about IE7 still not going to end up being
fully CSS-compliant.
http://www.decloak.com/Dev/CSSTables/CSS_Tables_01.aspx

I followed through with reading the link and some references found inside of
the site Kevin mentioned. One point that hit me was about the 'em' used for
width and I gave that a go. It didn't help, but my demo below uses it and
hopefully it will give you some insight into my problem.
I know you said the DIV will expand when the width is not set and I assumed
that was relating to the children.
As I mentioned in my reply to Kevin, I believe it to be best not to have the
entire width of the page filled if possible.
<div style="background-color: darkblue; width: 40em;">
<div style="background-color: Blue;">
something
</div>
<div style="background-color: lightblue; white-space: nowrap;">
Assume this test is a table and is a little too large for
the container making it expand. You'll notice the sibling does not fill it's
stretched parent container.
</div>
</div>

I hope there is something I'm missing that you are able to see that will
solve my problem. My only other thought that I was avoiding, believing it to
be a hack, would be to use a 3 col (or left and right margin) liquid approach
using '%'.

Thanks,
Nathan

"Murray" wrote:

> > Well, dealing I've done, but as it has been claimed that CSS can do
> > anything
> > Tables can, I think I have to beg to differ and hope someone can prove me
> > wrong. :)
>
> If you are reading people that are saying that, then stop reading them.
>
> > Let's say that table expands to 900px for whatever reason. I would like
> > the
> > container to expand (which it does), but so too the other children DIVs
> > (which don't). It was my expectation that all children DIVs without any
> > specified CSS tags (such as float or width...) would fill the container
> > wide-ways.
>
> They will if they do not have an assigned width.
>
> --
> Murray
> ============
>
> "Nathan" <Nathan@discussions.microsoft.com> wrote in message
> news:0F3CD67C-697F-40EC-9844-598FFCE991FA@microsoft.com...
> > I've a bit of a dilemma. I originally had my site setup using tables for
> > design purposes. It worked fine, but reading online more and more about
> > CSS
> > standards relating to FF and IE and especially with IE7 on it's way, I
> > felt
> > it appropriate to eliminate much of the tables (except for listed data)
> > and
> > deal with CSS.
> >
> > Well, dealing I've done, but as it has been claimed that CSS can do
> > anything
> > Tables can, I think I have to beg to differ and hope someone can prove me
> > wrong. :)
> >
> > Problem:
> > 760px container centered in page with 100% height. No problem.
> > 3 DIV children inside container as rows (header, menu, body).
> > In the body, I may have a table dynamically listing data with unknown cell
> > widths and nowrap used and desired.
> >
> > Let's say that table expands to 900px for whatever reason. I would like
> > the
> > container to expand (which it does), but so too the other children DIVs
> > (which don't). It was my expectation that all children DIVs without any
> > specified CSS tags (such as float or width...) would fill the container
> > wide-ways.
> >
> > I've seen a lot of liquid CSS designs out there with columns expanding and
> > contracting based on %, but I haven't been able to see anything like this.
> >
> > Any ideas/suggestions/comments/solutions/questions/(etc...)?
> >
> > Thanks,
> > Nathan
>
>
>

Re: CSS Expanding Children For Nested DIVs by Murray

Murray
Tue Oct 25 12:05:25 CDT 2005

The individual writing that article is a well-known crank. His arguments
are naive to the point of being humerous. But - they are his opinion. If
you look hard enough you can find anything on the web, and this link proves
it.

Notwithstanding this, however, if a table works best for a given
requirement, then by all means use it. See - it's not a binary decision in
my opinion, it's a pragmatic one. One place where tables work really well
is in presenting tabular data, which is where the W3C focuses its
recommendation to use them only for that purpose. Another place is in
building multi-column layouts, which the W3C ignores, more or less. Do not
feel that you are going to be arrested or have your computer taken away if
you use tables for that purpose. You can just use CSS for other aspects of
the page.

As for your example, I think it's unrealistic - the results are clearly
caused by the use of the nowrap tag combined with the explicit width on the
parent div. Try removing that explicit width and you'll see the sibling
fill the div's width.

--
Murray
============

"Nathan" <Nathan@discussions.microsoft.com> wrote in message
news:53420667-FD27-46BD-AE5E-8C6C7C4E0E64@microsoft.com...
> Ahh Murray, everyone has a right to their own opinion as long as it is
> validated with reason.
> I looked a little more online and found a harsh link that so very much
> opposed the use of CSS-P which frustrated me and almost got me to switch
> back
> to Table layout. The site had references out the yin-yang and even a
> somewhat
> recent link that I had read before about IE7 still not going to end up
> being
> fully CSS-compliant.
> http://www.decloak.com/Dev/CSSTables/CSS_Tables_01.aspx
>
> I followed through with reading the link and some references found inside
> of
> the site Kevin mentioned. One point that hit me was about the 'em' used
> for
> width and I gave that a go. It didn't help, but my demo below uses it and
> hopefully it will give you some insight into my problem.
> I know you said the DIV will expand when the width is not set and I
> assumed
> that was relating to the children.
> As I mentioned in my reply to Kevin, I believe it to be best not to have
> the
> entire width of the page filled if possible.
> <div style="background-color: darkblue; width: 40em;">
> <div style="background-color: Blue;">
> something
> </div>
> <div style="background-color: lightblue; white-space: nowrap;">
> Assume this test is a table and is a little too large for
> the container making it expand. You'll notice the sibling does not fill
> it's
> stretched parent container.
> </div>
> </div>
>
> I hope there is something I'm missing that you are able to see that will
> solve my problem. My only other thought that I was avoiding, believing it
> to
> be a hack, would be to use a 3 col (or left and right margin) liquid
> approach
> using '%'.
>
> Thanks,
> Nathan
>
> "Murray" wrote:
>
>> > Well, dealing I've done, but as it has been claimed that CSS can do
>> > anything
>> > Tables can, I think I have to beg to differ and hope someone can prove
>> > me
>> > wrong. :)
>>
>> If you are reading people that are saying that, then stop reading them.
>>
>> > Let's say that table expands to 900px for whatever reason. I would like
>> > the
>> > container to expand (which it does), but so too the other children DIVs
>> > (which don't). It was my expectation that all children DIVs without any
>> > specified CSS tags (such as float or width...) would fill the container
>> > wide-ways.
>>
>> They will if they do not have an assigned width.
>>
>> --
>> Murray
>> ============
>>
>> "Nathan" <Nathan@discussions.microsoft.com> wrote in message
>> news:0F3CD67C-697F-40EC-9844-598FFCE991FA@microsoft.com...
>> > I've a bit of a dilemma. I originally had my site setup using tables
>> > for
>> > design purposes. It worked fine, but reading online more and more about
>> > CSS
>> > standards relating to FF and IE and especially with IE7 on it's way, I
>> > felt
>> > it appropriate to eliminate much of the tables (except for listed data)
>> > and
>> > deal with CSS.
>> >
>> > Well, dealing I've done, but as it has been claimed that CSS can do
>> > anything
>> > Tables can, I think I have to beg to differ and hope someone can prove
>> > me
>> > wrong. :)
>> >
>> > Problem:
>> > 760px container centered in page with 100% height. No problem.
>> > 3 DIV children inside container as rows (header, menu, body).
>> > In the body, I may have a table dynamically listing data with unknown
>> > cell
>> > widths and nowrap used and desired.
>> >
>> > Let's say that table expands to 900px for whatever reason. I would like
>> > the
>> > container to expand (which it does), but so too the other children DIVs
>> > (which don't). It was my expectation that all children DIVs without any
>> > specified CSS tags (such as float or width...) would fill the container
>> > wide-ways.
>> >
>> > I've seen a lot of liquid CSS designs out there with columns expanding
>> > and
>> > contracting based on %, but I haven't been able to see anything like
>> > this.
>> >
>> > Any ideas/suggestions/comments/solutions/questions/(etc...)?
>> >
>> > Thanks,
>> > Nathan
>>
>>
>>



Re: CSS Expanding Children For Nested DIVs by Nathan

Nathan
Tue Oct 25 12:27:02 CDT 2005

I'm afraid I spoke a little too soon before trying the 'em' approach.
It would seem it actually did NOT work as hoped.
I had the 'em' set to about 55 and it looked like it fit fine, but then I
set it to 50 and the 3 elements wrapped.

In my most recent post to Murray, I've got 2 more tries before I bring it
back to Tables layout.

Nathan

"Kevin Spencer" wrote:

> Start here:
>
> http://www.webreference.com/authoring/style/sheets/layout/advanced/
>
> After going thorough that, you may want to follow the links in the page.
>
> --
> HTH,
>
> Kevin Spencer
> Microsoft MVP
> ..Net Developer
> A watched clock never boils.
>
> "Nathan" <Nathan@discussions.microsoft.com> wrote in message
> news:0F3CD67C-697F-40EC-9844-598FFCE991FA@microsoft.com...
> > I've a bit of a dilemma. I originally had my site setup using tables for
> > design purposes. It worked fine, but reading online more and more about
> > CSS
> > standards relating to FF and IE and especially with IE7 on it's way, I
> > felt
> > it appropriate to eliminate much of the tables (except for listed data)
> > and
> > deal with CSS.
> >
> > Well, dealing I've done, but as it has been claimed that CSS can do
> > anything
> > Tables can, I think I have to beg to differ and hope someone can prove me
> > wrong. :)
> >
> > Problem:
> > 760px container centered in page with 100% height. No problem.
> > 3 DIV children inside container as rows (header, menu, body).
> > In the body, I may have a table dynamically listing data with unknown cell
> > widths and nowrap used and desired.
> >
> > Let's say that table expands to 900px for whatever reason. I would like
> > the
> > container to expand (which it does), but so too the other children DIVs
> > (which don't). It was my expectation that all children DIVs without any
> > specified CSS tags (such as float or width...) would fill the container
> > wide-ways.
> >
> > I've seen a lot of liquid CSS designs out there with columns expanding and
> > contracting based on %, but I haven't been able to see anything like this.
> >
> > Any ideas/suggestions/comments/solutions/questions/(etc...)?
> >
> > Thanks,
> > Nathan
>
>
>

Re: CSS Expanding Children For Nested DIVs by Nathan

Nathan
Tue Oct 25 12:26:06 CDT 2005

Right, I was afraid it would come down to this.
I was expecting to code in what I would consider a standard way following
the W3C recommendations and ease for accessibility.

I can rid myself of the explicit width, but then the div takes up the entire
width of the page and that is what I wanted to avoid, a potential for
significant void in high resolution displays. Though like I said in the last
reply, I'll give the left/right margin's a '%' (or the 3 col approach) which
leaves the page center and also removes the explicit width. It's at that
point I'll find out what happens with the wider table (or in the example, the
nowrap text).

Thanks for your help m'man.
Nathan

"Murray" wrote:

> The individual writing that article is a well-known crank. His arguments
> are naive to the point of being humerous. But - they are his opinion. If
> you look hard enough you can find anything on the web, and this link proves
> it.
>
> Notwithstanding this, however, if a table works best for a given
> requirement, then by all means use it. See - it's not a binary decision in
> my opinion, it's a pragmatic one. One place where tables work really well
> is in presenting tabular data, which is where the W3C focuses its
> recommendation to use them only for that purpose. Another place is in
> building multi-column layouts, which the W3C ignores, more or less. Do not
> feel that you are going to be arrested or have your computer taken away if
> you use tables for that purpose. You can just use CSS for other aspects of
> the page.
>
> As for your example, I think it's unrealistic - the results are clearly
> caused by the use of the nowrap tag combined with the explicit width on the
> parent div. Try removing that explicit width and you'll see the sibling
> fill the div's width.
>
> --
> Murray
> ============
>
> "Nathan" <Nathan@discussions.microsoft.com> wrote in message
> news:53420667-FD27-46BD-AE5E-8C6C7C4E0E64@microsoft.com...
> > Ahh Murray, everyone has a right to their own opinion as long as it is
> > validated with reason.
> > I looked a little more online and found a harsh link that so very much
> > opposed the use of CSS-P which frustrated me and almost got me to switch
> > back
> > to Table layout. The site had references out the yin-yang and even a
> > somewhat
> > recent link that I had read before about IE7 still not going to end up
> > being
> > fully CSS-compliant.
> > http://www.decloak.com/Dev/CSSTables/CSS_Tables_01.aspx
> >
> > I followed through with reading the link and some references found inside
> > of
> > the site Kevin mentioned. One point that hit me was about the 'em' used
> > for
> > width and I gave that a go. It didn't help, but my demo below uses it and
> > hopefully it will give you some insight into my problem.
> > I know you said the DIV will expand when the width is not set and I
> > assumed
> > that was relating to the children.
> > As I mentioned in my reply to Kevin, I believe it to be best not to have
> > the
> > entire width of the page filled if possible.
> > <div style="background-color: darkblue; width: 40em;">
> > <div style="background-color: Blue;">
> > something
> > </div>
> > <div style="background-color: lightblue; white-space: nowrap;">
> > Assume this test is a table and is a little too large for
> > the container making it expand. You'll notice the sibling does not fill
> > it's
> > stretched parent container.
> > </div>
> > </div>
> >
> > I hope there is something I'm missing that you are able to see that will
> > solve my problem. My only other thought that I was avoiding, believing it
> > to
> > be a hack, would be to use a 3 col (or left and right margin) liquid
> > approach
> > using '%'.
> >
> > Thanks,
> > Nathan
> >
> > "Murray" wrote:
> >
> >> > Well, dealing I've done, but as it has been claimed that CSS can do
> >> > anything
> >> > Tables can, I think I have to beg to differ and hope someone can prove
> >> > me
> >> > wrong. :)
> >>
> >> If you are reading people that are saying that, then stop reading them.
> >>
> >> > Let's say that table expands to 900px for whatever reason. I would like
> >> > the
> >> > container to expand (which it does), but so too the other children DIVs
> >> > (which don't). It was my expectation that all children DIVs without any
> >> > specified CSS tags (such as float or width...) would fill the container
> >> > wide-ways.
> >>
> >> They will if they do not have an assigned width.
> >>
> >> --
> >> Murray
> >> ============
> >>
> >> "Nathan" <Nathan@discussions.microsoft.com> wrote in message
> >> news:0F3CD67C-697F-40EC-9844-598FFCE991FA@microsoft.com...
> >> > I've a bit of a dilemma. I originally had my site setup using tables
> >> > for
> >> > design purposes. It worked fine, but reading online more and more about
> >> > CSS
> >> > standards relating to FF and IE and especially with IE7 on it's way, I
> >> > felt
> >> > it appropriate to eliminate much of the tables (except for listed data)
> >> > and
> >> > deal with CSS.
> >> >
> >> > Well, dealing I've done, but as it has been claimed that CSS can do
> >> > anything
> >> > Tables can, I think I have to beg to differ and hope someone can prove
> >> > me
> >> > wrong. :)
> >> >
> >> > Problem:
> >> > 760px container centered in page with 100% height. No problem.
> >> > 3 DIV children inside container as rows (header, menu, body).
> >> > In the body, I may have a table dynamically listing data with unknown
> >> > cell
> >> > widths and nowrap used and desired.
> >> >
> >> > Let's say that table expands to 900px for whatever reason. I would like
> >> > the
> >> > container to expand (which it does), but so too the other children DIVs
> >> > (which don't). It was my expectation that all children DIVs without any
> >> > specified CSS tags (such as float or width...) would fill the container
> >> > wide-ways.
> >> >
> >> > I've seen a lot of liquid CSS designs out there with columns expanding
> >> > and
> >> > contracting based on %, but I haven't been able to see anything like
> >> > this.
> >> >
> >> > Any ideas/suggestions/comments/solutions/questions/(etc...)?
> >> >
> >> > Thanks,
> >> > Nathan
> >>
> >>
> >>
>
>
>

Re: CSS Expanding Children For Nested DIVs by Murray

Murray
Tue Oct 25 12:43:03 CDT 2005

Investigate the use of the max-width style in your CSS. Unfortunately, IE<7
does not support this useful style, but I suspect that IE7 will.

--
Murray
============

"Nathan" <Nathan@discussions.microsoft.com> wrote in message
news:A2DAB028-5C73-443E-AF6F-62E257A750EA@microsoft.com...
> Right, I was afraid it would come down to this.
> I was expecting to code in what I would consider a standard way following
> the W3C recommendations and ease for accessibility.
>
> I can rid myself of the explicit width, but then the div takes up the
> entire
> width of the page and that is what I wanted to avoid, a potential for
> significant void in high resolution displays. Though like I said in the
> last
> reply, I'll give the left/right margin's a '%' (or the 3 col approach)
> which
> leaves the page center and also removes the explicit width. It's at that
> point I'll find out what happens with the wider table (or in the example,
> the
> nowrap text).
>
> Thanks for your help m'man.
> Nathan
>
> "Murray" wrote:
>
>> The individual writing that article is a well-known crank. His arguments
>> are naive to the point of being humerous. But - they are his opinion.
>> If
>> you look hard enough you can find anything on the web, and this link
>> proves
>> it.
>>
>> Notwithstanding this, however, if a table works best for a given
>> requirement, then by all means use it. See - it's not a binary decision
>> in
>> my opinion, it's a pragmatic one. One place where tables work really
>> well
>> is in presenting tabular data, which is where the W3C focuses its
>> recommendation to use them only for that purpose. Another place is in
>> building multi-column layouts, which the W3C ignores, more or less. Do
>> not
>> feel that you are going to be arrested or have your computer taken away
>> if
>> you use tables for that purpose. You can just use CSS for other aspects
>> of
>> the page.
>>
>> As for your example, I think it's unrealistic - the results are clearly
>> caused by the use of the nowrap tag combined with the explicit width on
>> the
>> parent div. Try removing that explicit width and you'll see the sibling
>> fill the div's width.
>>
>> --
>> Murray
>> ============
>>
>> "Nathan" <Nathan@discussions.microsoft.com> wrote in message
>> news:53420667-FD27-46BD-AE5E-8C6C7C4E0E64@microsoft.com...
>> > Ahh Murray, everyone has a right to their own opinion as long as it is
>> > validated with reason.
>> > I looked a little more online and found a harsh link that so very much
>> > opposed the use of CSS-P which frustrated me and almost got me to
>> > switch
>> > back
>> > to Table layout. The site had references out the yin-yang and even a
>> > somewhat
>> > recent link that I had read before about IE7 still not going to end up
>> > being
>> > fully CSS-compliant.
>> > http://www.decloak.com/Dev/CSSTables/CSS_Tables_01.aspx
>> >
>> > I followed through with reading the link and some references found
>> > inside
>> > of
>> > the site Kevin mentioned. One point that hit me was about the 'em' used
>> > for
>> > width and I gave that a go. It didn't help, but my demo below uses it
>> > and
>> > hopefully it will give you some insight into my problem.
>> > I know you said the DIV will expand when the width is not set and I
>> > assumed
>> > that was relating to the children.
>> > As I mentioned in my reply to Kevin, I believe it to be best not to
>> > have
>> > the
>> > entire width of the page filled if possible.
>> > <div style="background-color: darkblue; width: 40em;">
>> > <div style="background-color: Blue;">
>> > something
>> > </div>
>> > <div style="background-color: lightblue; white-space:
>> > nowrap;">
>> > Assume this test is a table and is a little too large
>> > for
>> > the container making it expand. You'll notice the sibling does not fill
>> > it's
>> > stretched parent container.
>> > </div>
>> > </div>
>> >
>> > I hope there is something I'm missing that you are able to see that
>> > will
>> > solve my problem. My only other thought that I was avoiding, believing
>> > it
>> > to
>> > be a hack, would be to use a 3 col (or left and right margin) liquid
>> > approach
>> > using '%'.
>> >
>> > Thanks,
>> > Nathan
>> >
>> > "Murray" wrote:
>> >
>> >> > Well, dealing I've done, but as it has been claimed that CSS can do
>> >> > anything
>> >> > Tables can, I think I have to beg to differ and hope someone can
>> >> > prove
>> >> > me
>> >> > wrong. :)
>> >>
>> >> If you are reading people that are saying that, then stop reading
>> >> them.
>> >>
>> >> > Let's say that table expands to 900px for whatever reason. I would
>> >> > like
>> >> > the
>> >> > container to expand (which it does), but so too the other children
>> >> > DIVs
>> >> > (which don't). It was my expectation that all children DIVs without
>> >> > any
>> >> > specified CSS tags (such as float or width...) would fill the
>> >> > container
>> >> > wide-ways.
>> >>
>> >> They will if they do not have an assigned width.
>> >>
>> >> --
>> >> Murray
>> >> ============
>> >>
>> >> "Nathan" <Nathan@discussions.microsoft.com> wrote in message
>> >> news:0F3CD67C-697F-40EC-9844-598FFCE991FA@microsoft.com...
>> >> > I've a bit of a dilemma. I originally had my site setup using tables
>> >> > for
>> >> > design purposes. It worked fine, but reading online more and more
>> >> > about
>> >> > CSS
>> >> > standards relating to FF and IE and especially with IE7 on it's way,
>> >> > I
>> >> > felt
>> >> > it appropriate to eliminate much of the tables (except for listed
>> >> > data)
>> >> > and
>> >> > deal with CSS.
>> >> >
>> >> > Well, dealing I've done, but as it has been claimed that CSS can do
>> >> > anything
>> >> > Tables can, I think I have to beg to differ and hope someone can
>> >> > prove
>> >> > me
>> >> > wrong. :)
>> >> >
>> >> > Problem:
>> >> > 760px container centered in page with 100% height. No problem.
>> >> > 3 DIV children inside container as rows (header, menu, body).
>> >> > In the body, I may have a table dynamically listing data with
>> >> > unknown
>> >> > cell
>> >> > widths and nowrap used and desired.
>> >> >
>> >> > Let's say that table expands to 900px for whatever reason. I would
>> >> > like
>> >> > the
>> >> > container to expand (which it does), but so too the other children
>> >> > DIVs
>> >> > (which don't). It was my expectation that all children DIVs without
>> >> > any
>> >> > specified CSS tags (such as float or width...) would fill the
>> >> > container
>> >> > wide-ways.
>> >> >
>> >> > I've seen a lot of liquid CSS designs out there with columns
>> >> > expanding
>> >> > and
>> >> > contracting based on %, but I haven't been able to see anything like
>> >> > this.
>> >> >
>> >> > Any ideas/suggestions/comments/solutions/questions/(etc...)?
>> >> >
>> >> > Thanks,
>> >> > Nathan
>> >>
>> >>
>> >>
>>
>>
>>



Re: CSS Expanding Children For Nested DIVs by Kevin

Kevin
Tue Oct 25 13:35:12 CDT 2005

Why, you're quite welcome Nathan!

Actually, I found it after a bit of searching through various tutorials that
I Googled, and had gone back to the http://www.w3.org web site, which you
may be surprised to take a look at. In the past year or 2 it has undergone
quite a bit of work to make it more useful to people who, like myself, find
RFCs a very inefficient means of gathering and searching for information. In
particular, I found the following W3C page of help:

http://www.w3.org/Style/CSS/learning

The link to the tutorial I gave you the URL of was on that page, along with
a number of others. I liked that one the best. But there are quite a few
others recommended. And there is documentation now on the W3C site that is
much easier to comprehend and navigate through. Of course, the RFCs are
still there, and come in handy on a very few occasions.

I have found quite a bit of helpful information regarding HTML standards,
HTTP protocol standards, XML, XSL, and CSS on that site in recent months,
and it is swiftly becoming one of my "starting points" for information on
web-related technology.

One thing you can always count on with the W3C: You'll get factual
information. And that's a good thing!

--
HTH,

Kevin Spencer
Microsoft MVP
.Net Developer
A watched clock never boils.

"Nathan" <Nathan@discussions.microsoft.com> wrote in message
news:5A923FA6-E1E2-4BE5-885D-9B6466FAFE85@microsoft.com...
> Kevin, that was a good link that I had not yet seen. One thing I had seen
> before was the reference to use 'em' instead of '%' with regard to width,
> but
> it was a better explanation here, though I have to say it did not help my
> situation.
>
> Where it did help was an issue I was going to present later and that was
> the
> menu section. I had 3 separate elements and if I floated them (one being
> to
> the right) and changed the font size, they would wrap.
> If I went with a display:inline and nowrap, it would have been fine, but
> the
> rightmost element wouldn't have been at the rightmost edge of the
> container.
> But that 'em' for width works.
>
> The reason I wouldn't want my layout to mimic what was used on their site
> is
> because of void. I may have a page that has content best viewed at an 800
> width resolution and if a user had a 1280 or 1600 resolution, there would
> be
> a large void. I'd like it to start small and expand as needed.
>
> If you have anything else to offer, I'm wide open. And again, thanks for
> your input.
> Nathan
>
>
> "Kevin Spencer" wrote:
>
>> Start here:
>>
>> http://www.webreference.com/authoring/style/sheets/layout/advanced/
>>
>> After going thorough that, you may want to follow the links in the page.
>>
>> --
>> HTH,
>>
>> Kevin Spencer
>> Microsoft MVP
>> ..Net Developer
>> A watched clock never boils.
>>
>> "Nathan" <Nathan@discussions.microsoft.com> wrote in message
>> news:0F3CD67C-697F-40EC-9844-598FFCE991FA@microsoft.com...
>> > I've a bit of a dilemma. I originally had my site setup using tables
>> > for
>> > design purposes. It worked fine, but reading online more and more about
>> > CSS
>> > standards relating to FF and IE and especially with IE7 on it's way, I
>> > felt
>> > it appropriate to eliminate much of the tables (except for listed data)
>> > and
>> > deal with CSS.
>> >
>> > Well, dealing I've done, but as it has been claimed that CSS can do
>> > anything
>> > Tables can, I think I have to beg to differ and hope someone can prove
>> > me
>> > wrong. :)
>> >
>> > Problem:
>> > 760px container centered in page with 100% height. No problem.
>> > 3 DIV children inside container as rows (header, menu, body).
>> > In the body, I may have a table dynamically listing data with unknown
>> > cell
>> > widths and nowrap used and desired.
>> >
>> > Let's say that table expands to 900px for whatever reason. I would like
>> > the
>> > container to expand (which it does), but so too the other children DIVs
>> > (which don't). It was my expectation that all children DIVs without any
>> > specified CSS tags (such as float or width...) would fill the container
>> > wide-ways.
>> >
>> > I've seen a lot of liquid CSS designs out there with columns expanding
>> > and
>> > contracting based on %, but I haven't been able to see anything like
>> > this.
>> >
>> > Any ideas/suggestions/comments/solutions/questions/(etc...)?
>> >
>> > Thanks,
>> > Nathan
>>
>>
>>



Re: CSS Expanding Children For Nested DIVs by Nathan

Nathan
Tue Oct 25 17:45:07 CDT 2005

Oh my, talk about good stuff. I always dreaded going to W3C site as it was
just so overwhelming, but that Learning link is right on with what I'm
looking for.
I ended up at http://www.svendtofte.com/code/max_width_in_ie/
from http://www.maxdesign.com.au/presentation/em/
which was a link in the Learning section.

That goes along with the max-width Murray suggested in his last post.
Kudos to the both of you. :)
Nathan

"Kevin Spencer" wrote:

> Why, you're quite welcome Nathan!
>
> Actually, I found it after a bit of searching through various tutorials that
> I Googled, and had gone back to the http://www.w3.org web site, which you
> may be surprised to take a look at. In the past year or 2 it has undergone
> quite a bit of work to make it more useful to people who, like myself, find
> RFCs a very inefficient means of gathering and searching for information. In
> particular, I found the following W3C page of help:
>
> http://www.w3.org/Style/CSS/learning
>
> The link to the tutorial I gave you the URL of was on that page, along with
> a number of others. I liked that one the best. But there are quite a few
> others recommended. And there is documentation now on the W3C site that is
> much easier to comprehend and navigate through. Of course, the RFCs are
> still there, and come in handy on a very few occasions.
>
> I have found quite a bit of helpful information regarding HTML standards,
> HTTP protocol standards, XML, XSL, and CSS on that site in recent months,
> and it is swiftly becoming one of my "starting points" for information on
> web-related technology.
>
> One thing you can always count on with the W3C: You'll get factual
> information. And that's a good thing!
>
> --
> HTH,
>
> Kevin Spencer
> Microsoft MVP
> ..Net Developer
> A watched clock never boils.
>
> "Nathan" <Nathan@discussions.microsoft.com> wrote in message
> news:5A923FA6-E1E2-4BE5-885D-9B6466FAFE85@microsoft.com...
> > Kevin, that was a good link that I had not yet seen. One thing I had seen
> > before was the reference to use 'em' instead of '%' with regard to width,
> > but
> > it was a better explanation here, though I have to say it did not help my
> > situation.
> >
> > Where it did help was an issue I was going to present later and that was
> > the
> > menu section. I had 3 separate elements and if I floated them (one being
> > to
> > the right) and changed the font size, they would wrap.
> > If I went with a display:inline and nowrap, it would have been fine, but
> > the
> > rightmost element wouldn't have been at the rightmost edge of the
> > container.
> > But that 'em' for width works.
> >
> > The reason I wouldn't want my layout to mimic what was used on their site
> > is
> > because of void. I may have a page that has content best viewed at an 800
> > width resolution and if a user had a 1280 or 1600 resolution, there would
> > be
> > a large void. I'd like it to start small and expand as needed.
> >
> > If you have anything else to offer, I'm wide open. And again, thanks for
> > your input.
> > Nathan
> >
> >
> > "Kevin Spencer" wrote:
> >
> >> Start here:
> >>
> >> http://www.webreference.com/authoring/style/sheets/layout/advanced/
> >>
> >> After going thorough that, you may want to follow the links in the page.
> >>
> >> --
> >> HTH,
> >>
> >> Kevin Spencer
> >> Microsoft MVP
> >> ..Net Developer
> >> A watched clock never boils.
> >>
> >> "Nathan" <Nathan@discussions.microsoft.com> wrote in message
> >> news:0F3CD67C-697F-40EC-9844-598FFCE991FA@microsoft.com...
> >> > I've a bit of a dilemma. I originally had my site setup using tables
> >> > for
> >> > design purposes. It worked fine, but reading online more and more about
> >> > CSS
> >> > standards relating to FF and IE and especially with IE7 on it's way, I
> >> > felt
> >> > it appropriate to eliminate much of the tables (except for listed data)
> >> > and
> >> > deal with CSS.
> >>