asked on

Problem when DIV sections are 100% width and are placed inside of a table

I can create a DIV tag that has a style attributes of "width: 100%; overflow-x: scroll" and when viewed, looks completly normal whereby the div expands to the entire width of the screen and if the content within the div is too wide, it will scroll. But, if I take this same DIV section and simply place it within a basic table element (that is also set to 100% width), it no longer scrolls and it's width is as wide as the content. Using the following page as an example, how can I have a DIV section scroll across 100% screen width as in the top example, but yet still be able to place this div within a table element (which is a requirement).

http://208.42.226.229/div_wrap.htm

Any help is appreciated!

SOLUTION

Zyloch

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cLFlaVA

Cd&-

As a self-taught HTML scripter, I have become very comfortable using tables for layout over the six or so years I've been using HTML. This is actually the first I've heard that "they should not be used for layout". Could you elaborate a little further and possibly provide us with a link to maybe a resource or two that will teach me to break from the mold? Since I read your post, I'm having trouble thinking 'outside the box.'

Thanks.

-Cory

Zyloch

Heh, tables used to be the best, but not anymore =)

A Google search of CSS turns up great results, including w3c tutorial and specifications and the glish site for basic layouts.
http://www.google.com/search?hl=en&lr=&ie=UTF-8&safe=off&q=CSS&btnG=Search

cLFlaVA

Thanks Zyloch. Old habbits die hard.

Zyloch

Heh, I was lucky enough to never be in the age where you had to program in tables so I'm all for CSS. Lucky for me =)

COBOLdinosaur

"Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables."

HTML 4.01 standard section 11.1 -- 6th paragraph
http://www.w3.org/TR/html401/struct/tables.html

This link is to the W3C howto for tabless 3 column layouts:

http://www.w3.org/2002/11/homepage#howto

W3C seems to be having server problems today and the site is really slow, It is not normally that way.

Cd&

cLFlaVA

Thanks Cd&.

bmccleary

ASKER

Wow... great feedback! Thanks to all for your help in regards to this issue. Cobol, I have a question for you in regards to your statement, but I want to put together an example first so that you can see where I am coming from. I will get that up shortly, but I wanted to award the points now. Thanks again!

COBOLdinosaur

bmc,

I'll await the example. Thanks for the A. :^)

Cd&

bmccleary

ASKER

Cd&,
After almost 6 months, I finally have an example that compares my current method of displaying content boxes using tables to a method that uses CSS. I have worked hard to convert these tables into CSS layout, but have run into some stumbling blocks that I was hoping you could help me out with. The example that I have is at:
https://www.experts-exchange.com/questions/21350148/Displaying-content-boxes-with-rounded-corners-via-the-use-of-CSS-layouts-instead-of-tables.html

Any input you could provide would be greatly appreciated!