[WSG] 100% width table inside a DIV

[Miles Tillinger]

Hi,

Consider the following example:

http://www.streetdaddy.com/temp/index.html
http://www.streetdaddy.com/temp/index.css

I am developing a site based around this structure, however something in
the complicated CSS of my site is causing it to not behave the same as
this simple example.  The basic problem is that IE5+ is calculating
percentage widths based on the viewport rather than its parent element,
so the 100% width table goes off screen and the floated inner-columns
don't fit next to each other .  I have tried and tried to work out why
this is happening, to no avail...  Can anyone fill me in on the nuances
of this annoying problem?  Will I need to employ some browser specific
hacks?

The site im developing is slightly sensitive but if needed I can post up
the HTML and CSS for it...

Cheers,

Miles.
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**

RE: [WSG] 100% width table inside a DIV [SOLVED]

[Miles Tillinger]

SOLVED ... I think!

After reading some recenet articles at positioniseverything.net I
discovered that one method of fixing the IE bug is to use the
double-wrapper method:
http://www.positioniseverything.net/explorer/percentages.html (down the
page)

Not elegant, but works for me in IE5+.

The root cause is that I'm using a fluid 3 column layout in which the
centre div does not have a fixed width.  Setting a relative width on the
centre div also caused problems.  So I have another div around the table
so it can use it as the parent element:

div style=width:100%;
table ... /table
/div

So I can now have the table width set to 100% in CSS without causing any
problems.  I assume I could also set the table width inline but since
that sucks I haven't bothered to confirm it...

If there's a better way to do it I'd love to hear about it, but for now
it might just help me meet my deadline!

Regards,

Miles.
 

 -Original Message-
 From: [EMAIL PROTECTED] 
 [mailto:[EMAIL PROTECTED] On Behalf Of Miles Tillinger
 Sent: Wednesday, 17 August 2005 3:27 PM
 To: wsg@webstandardsgroup.org
 Subject: [WSG] 100% width table inside a DIV
 
 Hi,
 
 Consider the following example:
 
 http://www.streetdaddy.com/temp/index.html
 http://www.streetdaddy.com/temp/index.css
 
 I am developing a site based around this structure, however 
 something in the complicated CSS of my site is causing it to 
 not behave the same as this simple example.  The basic 
 problem is that IE5+ is calculating percentage widths based 
 on the viewport rather than its parent element, so the 100% 
 width table goes off screen and the floated inner-columns 
 don't fit next to each other .  I have tried and tried to 
 work out why this is happening, to no avail...  Can anyone 
 fill me in on the nuances of this annoying problem?  Will I 
 need to employ some browser specific hacks?
 
 The site im developing is slightly sensitive but if needed I 
 can post up the HTML and CSS for it...
 
 Cheers,
 
 Miles.
 **
 The discussion list for  http://webstandardsgroup.org/
 
  See http://webstandardsgroup.org/mail/guidelines.cfm
  for some hints on posting to the list  getting help
 **
 
 
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**