Solved

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

Posted on 2004-09-19
11
575 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
  • 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
 
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
CSS alignment question 8 37
CSS measurement 10 14
Simple Angular 2 login page 4 4
Datepicker in PHP 8 0
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
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.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

758 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now