A Table in a DIV - how do you stop it pushing the DIV?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
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?

Post by simonmlewis »

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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
rainerpl
Forum Newbie
Posts: 16
Joined: Mon Jun 20, 2011 12:46 pm

Re: A Table in a DIV - how do you stop it pushing the DIV?

Post by rainerpl »

i tried out your scenario and it works on mozilla, ie7,ie8 and in compatibility mode + in safari.

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>
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
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?

Post by simonmlewis »

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>
This doesn't work in IE8. Whether I set it to 95 or 15, it doesn't move.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
rainerpl
Forum Newbie
Posts: 16
Joined: Mon Jun 20, 2011 12:46 pm

Re: A Table in a DIV - how do you stop it pushing the DIV?

Post by rainerpl »

"...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.
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?

Post by simonmlewis »

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.
rainerpl
Forum Newbie
Posts: 16
Joined: Mon Jun 20, 2011 12:46 pm

Re: A Table in a DIV - how do you stop it pushing the DIV?

Post by rainerpl »

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.

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?

Post by simonmlewis »

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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
rainerpl
Forum Newbie
Posts: 16
Joined: Mon Jun 20, 2011 12:46 pm

Re: A Table in a DIV - how do you stop it pushing the DIV?

Post by rainerpl »

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.
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?

Post by simonmlewis »

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.
Love PHP. Love CSS. Love learning new tricks too.
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?

Post by simonmlewis »

Attached is a screenshot of the difference using a test page.

You have an Innerdiv:

Code: Select all

.innerbox {
	margin-left: auto;
	margin-right: auto;
	height: auto;
	width: 950px;
	text-align: left;
}
Then inside that you have two tables with a LEFT and RIGHT column, but controlled by CSS:

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;
}
In tableright, you have a 'mainbodybox' which controls the spacing the white sell of everything.

Code: Select all

.mainbodybox {
	margin-left: 20px;
	font-size: 12px;
	margin-right: 15px;
	padding-bottom: 30px;
}
Inside that, you have this, what is displayed below with the table in it:

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>
";
?>
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.
Attachments
This shows the difference.
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.
rainerpl
Forum Newbie
Posts: 16
Joined: Mon Jun 20, 2011 12:46 pm

Re: A Table in a DIV - how do you stop it pushing the DIV?

Post by rainerpl »

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.
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?

Post by simonmlewis »

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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
rainerpl
Forum Newbie
Posts: 16
Joined: Mon Jun 20, 2011 12:46 pm

Re: A Table in a DIV - how do you stop it pushing the DIV?

Post by rainerpl »

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?

Post by simonmlewis »

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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply