The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

how to add wanted space

Hi Folks,

My holding div (#divright) is 610px wide. I want #mainContent to be 560 px wide to allow for space between the text and the background border. When I try to adding padding or a margin, #divright gets pushed below #divleft.

If divright is 610px wide and maincontent is 560px wide then the maximum padding you can add will be 25px ether side:

e.g.

560 +25px padding each side = 560 + 25 + 25 = 610px

Code:

#mainContent {
width: 560px;
padding:25px;
}

If you then add borders to that then it will be too big and IE will drop it to find room underneath because it will stretch the parent wider to accomodate the greater content.

If you want more padding than 25px each side then reduce the width accordingly so that you never exceed the total of 610px. In the correct box model padding and borders area dded to an elements width to preserve the width at the size specified.

In ie5 and ie5.5 (and ie6 in quirks mode) padding and borders are placed inside the specified width an therefore the element doesn't get any bigger because the usable width diminishes.