CSS Expanding Children For Nested DIVs

[Nathan]

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

 

[Murray]

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.

 

[Kevin Spencer]

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]

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

 

[Nathan]

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]

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.

 

[Nathan]

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

 

[Nathan]

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

 

[Murray]

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.

 

[Kevin Spencer]

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]

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

 

[Murray]

Glad I could help, even a little.... 8)

 

[Nathan]

Sigh, it would seem I'll have to revert back to Table Layout.
I think it would have worked with min-width, but <=IE6 doesn't deal with it.
I tried the width:expression hack but I need to check for 'em' width and
clientWidth only gives the width in 'px'.

I just now thought about doing clientWidth/16px to give the 'em' at 1em, but
the issue I foresee is if the client increases their browser font size making
the 16px inaccurate.

Out of curiousity, I cleared all style attributes except background-color in
my <div> test and found that the longest text div caused the horizontal
scroll, but the short text div's background-color only went to the width of
the browser window and didn't even extend the entire width as I would have
expected. That is why I'm going back to Table Layout.

A Question Arises: Even though the width was a non-issue with the table in
IE, I wonder how it will behave in FF and NS.
If I set the width of the containing Table to be 760px and the child table
causes the cell to expand past 760px in IE, will FF and NS not expand it?
<table style="760px">
<tr>
<td>Some junk here will expand as much as the container expands</td>
</tr>
<tr>
<td><table>...wider than 760px...</table>
</tr>
</table>
Maybe you'll just say "install FF and NS and test it yourself." My response,
"I'm a MS fanatic and don't like anything but."
I just wish standards were used in all browsers and if the companies wish,
they can add other features to their browsers. Hey, I can dream.
Nathan

 

[Murray]

You can emulate min-width with the prop and clear technique. Google it, and
I think you will find it.

Oh, heck - here you go....

http://www.greywyvern.com/code/min-height-hack.html

 

[Thomas A. Rowe]

Tables will work just fine, as long as the content inserted is able to wrap or if a image, then the
image must have a width that is equal to or less then the maximum width of your table.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================