Solved

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

Posted on 2004-09-19
11
581 Views
Last Modified: 2012-06-21
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!
0
Comment
Question by:bmccleary
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
  • +1
11 Comments
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 100 total points
ID: 12096263
Hi bmccleary,

Because tables will always conform to your data, and your div has 100% width, it will never show the scrollbars. The only way I can think of is to combine it with some scripting, for instance, on body onload and onresize, you'd change the <div> width. Suppose the <div> is IDed as "content". Then, something like this:

<body onload="document.getElementById('content').style.width=window.availWidth;" onresize="document.getElementById('content').style.width=window.availWidth;">

Regards,
Zyloch
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 400 total points
ID: 12096456
Tables and table content do not have to obey the rules.  That is why they should not be used for layout.  Making use of the table a "requirement " is a stupid decision.  If that was your decison sorry if you are offended but we spend a disproportionate amount of time on this site trying to fix defective designe based on using table for layout management.

So to the problem.  

The table will need a style entry:

<table style="width:100%;table-layout fixed;">

then the width of the cells should be in percentages, and the total should not exceed 100%.  It can still break but it will hold together a little better that way.  

BTW,

overflow-x is IE only so it will not work for 20% of users for Mozilla based browers you wil need overflow:auto;clip:auto to hold form.

The script method will likely manage the table, but it will still break at the cell level unless you script the width of every cell as well.

I would recommend you use tables for tabular data the way they were intended to be used, and do layout withe CSS, otherwise you are going to spend a lot of time fixing things that get broken everytime a new verion of a browser comes out, and every time the page need minor changes.

Cd&

0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12096931
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
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 36

Expert Comment

by:Zyloch
ID: 12096957
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

0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12097021
Thanks Zyloch.  Old habbits die hard.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12097026
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 =)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12097350
"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&
0
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12097387
Thanks Cd&.
0
 

Author Comment

by:bmccleary
ID: 12103146
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!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12104197
bmc,

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

Cd&
0
 

Author Comment

by:bmccleary
ID: 13537307
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:
http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21350148.html

Any input you could provide would be greatly appreciated!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question