Child TABLE, width:100%

O

Oli Filth

Hi,

I know this is a common problem (I've been looking at Google results for
an hour!!), but in this case I can't find a solution.

Please have a look at this test page: http://olifilth.co.uk/01.html

There are three DIVs (blue) with absolute positioning. The central DIV
contains a TABLE (pink) with CSS styling of width: 100%.

In Firefox, it does what one would expect, i.e. the central DIV falls
between the ones on either side according to the CSS positioning, and
the child TABLE expands to fill 100% of this DIV's width.

However in IE (6), the central DIV flows off the right-hand side of the
page, because IE decides to (incorrectly) use the viewport as its
reference for TABLE percentage measurements.

I've read various things saying that to fix this, one should wrap the
TABLE in a <DIV width="100%"> or <DIV style="width: 100%">, however in
this case, neither seems to solve it.

Any ideas?
 
E

Els

Oli said:
Please have a look at this test page: http://olifilth.co.uk/01.html
In Firefox, it does what one would expect, i.e. the central DIV falls
between the ones on either side according to the CSS positioning, and
the child TABLE expands to fill 100% of this DIV's width.

However in IE (6), the central DIV flows off the right-hand side of the
page, because IE decides to (incorrectly) use the viewport as its
reference for TABLE percentage measurements.
Any ideas?

Don't use position:absolute for the middle container, but use margins
instead:

#listing
{
margin-left: 250px;
margin-right: 250px;
}

tested in IE6, Opera8 and FF1.0.4.
IE5.0 needs a width:100% on the div#listing.
Can't have that in the other browsers though, so:

#listing
{
margin-left: 250px;
margin-right: 250px;
width:100%;
w\idth:auto; /* sets width back to auto for modern browsers */
}
 
O

Oli Filth

Els said the following on 11/06/2005 20:52:
Oli Filth wrote:




Don't use position:absolute for the middle container, but use margins
instead:

#listing
{
margin-left: 250px;
margin-right: 250px;
}

tested in IE6, Opera8 and FF1.0.4.

Excellent, that does fix it! Cheers.
 
D

dorayme

http://olifilth.co.uk/01.html
There are three DIVs (blue) with absolute positioning. The central DIV
contains a TABLE (pink) with CSS styling of width: 100%.

In Firefox, it does what one would expect, i.e. the central DIV falls
between the ones on either side according to the CSS positioning, and
the child TABLE expands to fill 100% of this DIV's width.

However in IE (6), the central DIV flows off the right-hand side of the
page, because IE decides to (incorrectly) use the viewport as its
reference for TABLE percentage measurements.

I've read various things saying that to fix this, one should wrap the
TABLE in a <DIV width="100%"> or <DIV style="width: 100%">, however in
this case, neither seems to solve it.

Any ideas?

In my best browser for css, Mozilla, the child table falls outside (on the
right) of the central div (it has to really) when the window is reduced in
width to about 60% of a 20" 1024x870 screen (a width not that small). Plus,
there is all sorts of overlap trouble when the fonts are enlarged in
everything *but* from within the table itself (good old tables, their strong
point, a little world of their own, keeping their dignity and integrity in
any rough sea).

FYI

dorayme
 
O

Oli Filth

dorayme said the following on 12/06/2005 00:43:
In my best browser for css, Mozilla, the child table falls outside (on the
right) of the central div (it has to really) when the window is reduced in
width to about 60% of a 20" 1024x870 screen (a width not that small). Plus,
there is all sorts of overlap trouble when the fonts are enlarged in
everything *but* from within the table itself (good old tables, their strong
point, a little world of their own, keeping their dignity and integrity in
any rough sea).

You are right about the table overflowing when the window size is
reduced, thanks for noticing that! However, I'm willing to live with
that; most people using this site (it's for a private intranet) will be
on big screens.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,477
Members
44,898
Latest member
BlairH7607

Latest Threads

Top