Table not enclosed within div element

[jimfog]

I have created a table(table id="contact"), this table is within a div element, at least in theory, because in practice it does not and i cannot understand why this is happening.When i apply border to the div element(#all), the table stays out of it, normally it should not, since the table is enclosed in the div element.What might be wrong here?Here is the code.

<div id="all"> <div align="left" id="leftcolumn"><jdoc:include type="modules" name="left" style="rounded" /></div> <a name="up" id="up"></a> <div align="right" id="centralcolumn"><jdoc:include type="component" /></div> <div id="contact"> <table id="contact" cellspacing="15" align="left" width="1%" cellpadding="2"> <tr><th colspan="2" style="font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif" > Eπικοινωνία</th></tr> <tr><td style=" width:-15px"><img src="/korakeiko/templates/themza_j15_21/images/Mail-2.png" width="31" height="31" /></td><td><a href="mailto:pap56@ath.forthnet.gr">Korakotaxidromio</a></td></tr> <tr> <td><img src="/korakeiko/templates/themza_j15_21/images/Mobile.png" width="31" height="31" /></td><td>6973999099</td></tr> </table></div> </div>

[dsonesuk]

Depends on css styling assigned to table, could be positioned absolute, which would cause it to ignore div container width completely. We can't help unless we have access to page or css styling usedd.

[jimfog]

Depends on css styling assigned to table, could be positioned absolute, which would cause it to ignore div container width completely. We can't help unless we have access to page or css styling usedd.

You are right, i neglected the css code, here is it.The div containing the table:

#contact { clear:both; width: auto;}

The #all div containing the div contact(which contains the table, the table id is also #contact):

#all { height:auto; margin-left:auto; margin-right:auto; width:800px;}

I hope we can reach a conclusion now.

[ShadowMage]

For starters, id's have to be unique. You can only use an id once per page. In this case it shouldn't make a difference but it's worth trying. Just change one of the contact id's (for example, change div#contact to div#contact_cont)Other than that, I don't see anything that should be a problem. This is all of the CSS relevant to the table and the div containers?

[jimfog]

For starters, id's have to be unique. You can only use an id once per page. In this case it shouldn't make a difference but it's worth trying. Just change one of the contact id's (for example, change div#contact to div#contact_cont)Other than that, I don't see anything that should be a problem. This is all of the CSS relevant to the table and the div containers?

Here is another block of code, this code is generated by the system, it is not placed in the css file by me, despite that, i placed it in the css file to see what will happen, i modified it, but still the problem persists, i also tried your suggestions also, with no effect.

table[align=left] { float: left;}table { -moz-box-sizing: border-box; border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; text-indent: 0;}

If still we cannot find a solution i will upload the site(i am developing it locally)-it is half-complete but at least you will be able to see the problem in its entirety.

[dsonesuk]

This looks very much like a joomla template that you are working with, as in <jdoc:include type="modules" name="left" style="rounded" /><jdoc:include type="component" />which are usually within the index.php, which you should never touch, unless you know what you are doing.you add content through the backend in article manager, the layout is controlled by php, and changes depending of columns you require usually 1 to 3(left, right, content module positions), and adjusts automatically.if are attempting to add content to the left module position, you will have to have a plugin, which allows you to insert custom html content in a module, then assign this module to the left module position.

[jimfog]

This looks very much like a joomla template that you are working with, as in <jdoc:include type="modules" name="left" style="rounded" /><jdoc:include type="component" />which are usually within the index.php, which you should never touch, unless you know what you are doing.you add content through the backend in article manager, the layout is controlled by php, and changes depending of columns you require usually 1 to 3(left, right, content module positions), and adjusts automatically.if are attempting to add content to the left module position, you will have to have a plugin, which allows you to insert custom html content in a module, then assign this module to the left module position.

Yes this a joomla template which i am trying to modify, nonetheless i think that it is possible to write custom code in it without resorting to the custom html module plugin.I am not sure about that last said, but i will search the matter more.Besides the code is place in the template without problem except the div enclosing problem.I think this is a css problem, not related with joomla, i will investigate the matter.

[dsonesuk]

did you make the changes shadowmage suggested as in change the duplicate reference to id="contact", you should have similar to below<div id="all"><div align="left" id="leftcolumn"><jdoc:include type="modules" name="left" style="rounded" /></div><a name="up" id="up"></a><div align="right" id="centralcolumn"><jdoc:include type="component" /></div><div id="contact"><table id="contact_table" cellspacing="15" align="left" width="1%" cellpadding="2"><tr><th colspan="2" style="font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif" > Eπικοινωνία</th></tr><tr><td style=" width:15px"><img src="/korakeiko/templates/themza_j15_21/images/Mail-2.png" width="31" height="31" /></td><td><a href="mailto:pap56@ath.forthnet.gr">Korakotaxidromio</a></td></tr><tr> <td><img src="/korakeiko/templates/themza_j15_21/images/Mobile.png" width="31" height="31" /></td><td>6973999099</td></tr></table></div></div>i don't know which#contact {clear:both;width: auto;}is supposed to reference? I also removed the - from style=" width:15px" as it produces a not valid error.All of this probably won't fix you problem, but I can't really make any other suggestions, unless we see the site itself so we can identify if css, or html produced by php coding is causing this result.

[jimfog]

did you make the changes shadowmage suggested as in change the duplicate reference to id="contact", you should have similar to below<div id="all"><div align="left" id="leftcolumn"><jdoc:include type="modules" name="left" style="rounded" /></div><a name="up" id="up"></a><div align="right" id="centralcolumn"><jdoc:include type="component" /></div><div id="contact"><table id="contact_table" cellspacing="15" align="left" width="1%" cellpadding="2"><tr><th colspan="2" style="font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif" > Eπικοινωνία</th></tr><tr><td style=" width:15px"><img src="/korakeiko/templates/themza_j15_21/images/Mail-2.png" width="31" height="31" /></td><td><a href="mailto:pap56@ath.forthnet.gr">Korakotaxidromio</a></td></tr><tr> <td><img src="/korakeiko/templates/themza_j15_21/images/Mobile.png" width="31" height="31" /></td><td>6973999099</td></tr></table></div></div>i don't know which#contact {clear:both;width: auto;}is supposed to reference? I also removed the - from style=" width:15px" as it produces a not valid error.All of this probably won't fix you problem, but I can't really make any other suggestions, unless we see the site itself so we can identify if css, or html produced by php coding is causing this result.

I made the changes suggested(table has id now contact_ta and NOT contact which is the id of the div element containing the table) but the problem still persists, i will upload the site in a few days and you will be able to see better the nature of the problem.P.S The #contact selector of the CSS file references now the div element contact-since i changed the name of the table id to contact_ta.

[tmette]

It might be the "float" that is generated by the system. Floating an element takes it out of the page flow so the div isn't containing it?Just a thought.

[pjsfchaplin]

Yeah, float elements are generally ignored when calculating the height of the containing element.It's a nuisance, more often than not, but there are a few workarounds:Try adding:#all { overflow: hidden;}or if that doesn't work:#all { float: left;}(depending what else the page contains).A third option would be to add an empty div element after the table with "clear:both;" set.

[jimfog]

Yeah, float elements are generally ignored when calculating the height of the containing element.It's a nuisance, more often than not, but there are a few workarounds:Try adding:#all { overflow: hidden;}or if that doesn't work:#all { float: left;}(depending what else the page contains).A third option would be to add an empty div element after the table with "clear:both;" set.

Τhe problem was fixed, i do not know what i did but it is fixed. I did not try the solutions proposed(thanks) but it is ok now.I can only assume what might have fixed the problem.After the table(that was enclosed in the div#all) i inserted another element.Somehow, this new element, by placing it there, fixed the issue.I am still searching how this was achieved precisely, nonetheless the issue is no more.Thanks for the help, when i find how the problem was fixed i will post here again.

[pjsfchaplin]

Yep, that's basically doing the same thing as my third suggestion, provided that the new element is tall enough or wide enough to be pushed underneath.The table is floating, and for some reason floating elements are generally ignored when calculating the height of the containing element. The element that comes after isn't floating, so it isn't ignored.

[ShadowMage]

A more elegant solution is to add overflow: auto; or overflow: hidden; to the container. Unless, of course, you need that extra element at the bottom anyway...