471,617 Members | 1,119 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,617 software developers and data experts.

Borders and Padding and Height and Width

I'm really starting to lose it on this problem.

I have created 2 <div> tags that will server as boxes.
While explaining my problem I will refer to these <div> tags as Boxes...to keep things simple.

I'd like to draw a box with a border...have the content started 5px away from its edges. I will refer to this box as the "outter box"

Then I'd like to draw another box within the box...I will refer to this box as the "inner box". The inner box will be drawn with a border and have it's content started 5px away from it's edge. I would like this box to fill 100% of it's containing box (minus the 5px padding).

Sounds simple enough.

For the LIFE of me I cannot get this to work.

If I set the inner box to have a height of 100% the bottom of this box goes outside of the bottom of it's parent box. If I set the width of the inner box to 100%, the right side of this box goes out side of the parent box.

It has something to do with the padding.
When I remove the 5px padding CSS from the inner box and set the height and width to 100%....there is a 5px padding between the outter box and inner box only on the top and left side....the right and bottom are flush together.

I've tried using different displays for the boxes.
I've tried taking the padding off of the outter box and setting a 5px margin for the inner box....I've tried just about everything!

Please help me figure out why this is happening!

Expand|Select|Wrap|Line Numbers
  1. <div class="tabBox" style="height:400px; width:800px;">
  2.      <div class="tabContent">
  3.               BORDERS and HEIGHT and JUST WORK pLeAsE!
  4.       </div><!--close tab content-->
  5. </div><!--close tab box-->
Expand|Select|Wrap|Line Numbers
  1. .tabContent
  2. {
  3.     padding: 5px 5px 5px 5px;
  4.     display: run-in;
  5.     border:solid 3px #9FB6CD;
  6.     height:100%;
  7. }
  8. .tabBox
  9. {    border:solid 4px Gray; 
  10.     padding:5px 5px 5px 5px; 
  11.     margin:0px 0px 0px 0px; 
  12. }
Thanks in advance for your help!

Aug 31 '07 #1
1 1561
7,435 Expert 4TB
You are just getting mixed up with how the padding is affecting the start of the next 'box'. You just need to review the box model to see that. You don't have any problems that can't be fixed easily once you understand how the borders and padding are pushing inwards onto your inner box.
Aug 31 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by delerious | last post: by
36 posts views Thread by phil-news-nospam | last post: by
5 posts views Thread by Hendrik Maryns | last post: by
2 posts views Thread by nicstel | last post: by
1 post views Thread by ZEDKYRIE | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.