I would like to create two boxes to place text in each only taking up half of the screen. I would like to use a padding of 15px around each box and have them vertically centered within my given space and each box only 300px high. The best I can come up with is what I have below but that dose not work. Please help. Thanks.

box.410
{width:50%;
height:300px;
padding:15px;
margin:0 auto;}

and

box.420
{width:50%;
height:300px;
padding:15px;
float:right;
margin:0 auto;}

A 300px box with 15px of padding is going to be a total height of 330px (300+15+15). The width would be whatever your 50% width number is plus those 30px of padding you're adding.

So, in order to have the boxes ONLY take up 50% of the width, you're going to have to make them smaller than 50% then add the padding to then equal 50% total width.

Originally Posted by LadynRed

A 300px box with 15px of padding is going to be a total height of 330px (300+15+15). The width would be whatever your 50% width number is plus those 30px of padding you're adding.

So, in order to have the boxes ONLY take up 50% of the width, you're going to have to make them smaller than 50% then add the padding to then equal 50% total width.

The width of the space I am working with can't be done that way because it changes depending of the resolution of the persons screen. The height is also undetermined because it too changes depending on resolution.

What I was trying to tell you is that 50% PLUS padding is no longer 50%, it's more than 50%, so you're going to have things moving around because the total width of your boxes will be wider than their parent container.

Padding is added to the width of the box, it doesn't go inside it. You will have to adjust your calculations, or your layout, to compensate.

Originally Posted by LadynRed

What I was trying to tell you is that 50% PLUS padding is no longer 50%, it's more than 50%, so you're going to have things moving around because the total width of your boxes will be wider than their parent container.

Padding is added to the width of the box, it doesn't go inside it. You will have to adjust your calculations, or your layout, to compensate.

The reason I was trying to do this is to replace my tables I am using right now on my index page is because my tables only center in IE and do not center in Firefox. They are invisible but you will get the idea when you see the text.

The page is http://robinsden.co.cc