A Table in a DIV - how do you stop it pushing the DIV?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
A Table in a DIV - how do you stop it pushing the DIV?
I have a DIV with no width setting.
It is inside a DIV that has a margin-right of 15px.
The inner DIV fits perfect with the 15px space to the right of it.
Inside that inner DIV is a table, and it needs to be a table.
The table is set to width='100%', yet in IE8 it forces the entire table and DIV right out to the edge of the outer DIV (with that margin-right on it).
Why? As I thought Tables inside divs would be 100% of the DIV it resides in.
And how to I stop it happening?
It is inside a DIV that has a margin-right of 15px.
The inner DIV fits perfect with the 15px space to the right of it.
Inside that inner DIV is a table, and it needs to be a table.
The table is set to width='100%', yet in IE8 it forces the entire table and DIV right out to the edge of the outer DIV (with that margin-right on it).
Why? As I thought Tables inside divs would be 100% of the DIV it resides in.
And how to I stop it happening?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: A Table in a DIV - how do you stop it pushing the DIV?
i tried out your scenario and it works on mozilla, ie7,ie8 and in compatibility mode + in safari.
is this what you mean
i added borders to see where each elements ends, and it works. You may have some other css rules that over ride your current rules
is this what you mean
Code: Select all
<div style="margin-right:15px;">
<div style="border-right:2px dashed red;">
<table style="border-right:1px solid blue;width:100%;">
//content
</table>
</div>
</div>
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: A Table in a DIV - how do you stop it pushing the DIV?
Code: Select all
<div style="margin-right:95px;">
<div style="border-right:2px dashed red;">
<table style="border-right:1px solid blue;width:100%;">
<tr><td>asdfasdf</td></tr>
</table>
</div>
</div>Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: A Table in a DIV - how do you stop it pushing the DIV?
"...it doesn't move."
What doesnt move? the border on the right or the content of the table.
The content isnt supposed to move. and i copy pasted your code and checked it out and it works.
if you want to move the content, then set margin-left:15px or something.
What doesnt move? the border on the right or the content of the table.
The content isnt supposed to move. and i copy pasted your code and checked it out and it works.
if you want to move the content, then set margin-left:15px or something.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: A Table in a DIV - how do you stop it pushing the DIV?
Make the margin on the right bigger......more space there.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: A Table in a DIV - how do you stop it pushing the DIV?
are you talking about more space between the inner div and outer div?
if so, you need to add margin to inner div not outer, or add padding to outer div.
anyways, i added a wrapper to the all the previous divs and background colors. if you change the margins, you should be able to see the light gray and dark gray areas change.
if so, you need to add margin to inner div not outer, or add padding to outer div.
anyways, i added a wrapper to the all the previous divs and background colors. if you change the margins, you should be able to see the light gray and dark gray areas change.
Code: Select all
<div style="background-color:gray;">
<div style="margin-right:95px;background-color:darkGray;">
<div style="border-right:2px dashed red;">
<table style="border-right:1px solid blue;width:100%;">
<tr><td>asdfasdf</td></tr>
</table>
</div>
</div>
</div>
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: A Table in a DIV - how do you stop it pushing the DIV?
To be fair to you, I know all of this. The odd thing is, for my script it just won't work.
I think you are right, something else is pushing it out.
If I set the table to 95%, it all comes in fine, but then IE and FF interpret that spacing rather differently. It's just that it only does it with the table.
Maybe there is something in my table forcing it out.
I think you are right, something else is pushing it out.
If I set the table to 95%, it all comes in fine, but then IE and FF interpret that spacing rather differently. It's just that it only does it with the table.
Maybe there is something in my table forcing it out.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: A Table in a DIV - how do you stop it pushing the DIV?
well, make a new clean html page for testing, and remove all content...data and see if the overall layout works.
or...use some dev tools...IE has inbuilt tools and firefox has firebug extention which is super, and see all the active css rules....and disable them one buy one to see the effect. I think float can screw up things.
or...use some dev tools...IE has inbuilt tools and firefox has firebug extention which is super, and see all the active css rules....and disable them one buy one to see the effect. I think float can screw up things.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: A Table in a DIV - how do you stop it pushing the DIV?
I know what you mean about Float - it can be a real pain.
This isn't caused by that class tho. This is just a DIV inside another DIV.
The outer div has a padding-right of 15px.
The Inner div has no margin.
Inside the inner div is a table.
If I remove the table, all DIVs behave correctly with suitable 15px spacing.
The moment I put a table in - WITH NOT CLASSES OR SETTINGS - it forces the entire inner div outward, essentially crushing the 15px of padding......... ONLY IN IE8.
It's infuriating. I wish IE8 had a tool so I could see the DIVs and Table lines, like FFs Web Developer tools.
This isn't caused by that class tho. This is just a DIV inside another DIV.
The outer div has a padding-right of 15px.
The Inner div has no margin.
Inside the inner div is a table.
If I remove the table, all DIVs behave correctly with suitable 15px spacing.
The moment I put a table in - WITH NOT CLASSES OR SETTINGS - it forces the entire inner div outward, essentially crushing the 15px of padding......... ONLY IN IE8.
It's infuriating. I wish IE8 had a tool so I could see the DIVs and Table lines, like FFs Web Developer tools.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: A Table in a DIV - how do you stop it pushing the DIV?
Attached is a screenshot of the difference using a test page.
You have an Innerdiv:
Then inside that you have two tables with a LEFT and RIGHT column, but controlled by CSS:
In tableright, you have a 'mainbodybox' which controls the spacing the white sell of everything.
Inside that, you have this, what is displayed below with the table in it:
If I do it raw, with nothing whatsoever else on the page, it's fine. But when I look at the widths in this 'tableright' and the mainbodybox etc, it should all be fine.
You have an Innerdiv:
Code: Select all
.innerbox {
margin-left: auto;
margin-right: auto;
height: auto;
width: 950px;
text-align: left;
}Code: Select all
.tableleft
{
width:204px;
background-color:#000000;
padding-top: 15px;
vertical-align: top;
font-size: 12px;
}
.tableright
{
background-color:#ffffff;
vertical-align: top;
width: 746px;
}Code: Select all
.mainbodybox {
margin-left: 20px;
font-size: 12px;
margin-right: 15px;
padding-bottom: 30px;
}Code: Select all
<?php
echo "<div class='head'>Selling</div>
<div class='reminderbox'>
Outside box
<table class='table' cellpadding='0' cellspacing='0' style='width: 100%; border: 1px solid #ff0000'>
<tr><td><div style='border: 1px solid #000000'>hello</div></td></tr></table>
</div>
";
?>- Attachments
-
- This shows the difference.
- screen.png (9.44 KiB) Viewed 8798 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: A Table in a DIV - how do you stop it pushing the DIV?
still cant replicate it.
can you post the resulting code from the php.
e.g copy paste from page source the part which draws the divs and table + all related styles.
Ive had similar problems before, and usually....running the resulting source code through a html and css validator and fixing all errors helps.
can you post the resulting code from the php.
e.g copy paste from page source the part which draws the divs and table + all related styles.
Ive had similar problems before, and usually....running the resulting source code through a html and css validator and fixing all errors helps.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: A Table in a DIV - how do you stop it pushing the DIV?
Not absolutely sure I can, as much of the content that would result, is confidential. But I could perhaps create a dummy of the site, dummy banner, dummy words as the problem would still be the same.
So you want the SOURCE from the PHP, and the styles that are being used on the page in a stylesheeet?
So you want the SOURCE from the PHP, and the styles that are being used on the page in a stylesheeet?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: A Table in a DIV - how do you stop it pushing the DIV?
yeah, you can replace whatever confidential content there may be...like company names and passwords, but replace them with equally long text, and either post the code or if you can, host it as temporary html page and link it.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: A Table in a DIV - how do you stop it pushing the DIV?
Instead, I am firstly going to try and do it all with DIVs, no tables.
Inline DIVs. the top line are headers, but I can put them in the same separate DIVs, and the outer div can have a "top left" background image.
If that fails, I'll try the dummy.
Inline DIVs. the top line are headers, but I can put them in the same separate DIVs, and the outer div can have a "top left" background image.
If that fails, I'll try the dummy.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.