By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,686 Members | 1,603 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,686 IT Pros & Developers. It's quick & easy.

Borders and Padding and Height and Width

P: 74
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-->
  6.  
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. }
  13.  
Thanks in advance for your help!

-LilOlme
Aug 31 '07 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
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.