Padding Issue

[invader11]

Hi,

I have a very basic setup in joomla at the moment where I define a container and want to place components within that container like this:

Code: Select all

<div id="container">
	<jdoc:include type="modules" name="MainMenu" />
</div>

Code: Select all

position: relative;
padding: 10px; 
width: 900px; 
background-color: blue;

My main menu has some items at the moment.
When I am in the Home page, the container is exactly 900px and items inside it are within 10px from the edges as they should. All good so far.

Whenever I click any other menu item though, the container gets bigger by 20px, twice as much as the padding. If I change the padding number then the container gets bigger twice by that number. If I remove the padding entirely it stays at 900px always!

I have reduced this to the bare minimum, there are no other divs or styles to affect this and even more certain there is nothing specific to the other pages that the menu links to.

Thanks..

[Webdongle]

link please

[invader11]

Im sorry, I cant provide a link as the site is locally on my PC at the moment and not on live server.

However I have solved the issue by specifying box-sizing: border-box; in my container style, as I have found that this forces the size of the element to be preserved. Though it doesnt explain why it should work fine in the main page and not on the others...