473,225 Members | 1,290 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,225 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 1667
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

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

Similar topics

by: Wenslauw | last post by:
A weird thing is going on. I don't understand it. I made a table: <TABLE border=0 cellpadding=0 cellspacing=0> <TR> <TD><A href="something"><IMG src="Welkom.gif" width="51"...
by: delerious | last post by:
Could someone please take a look at this page: http://home.comcast.net/~delerious1/index11.html The set of links on the left should not have any whitespace between them, and the set of links...
by: Matt Kruse | last post by:
See: http://www.mattkruse.com/temp/offsetleft.html It appears that the offsetLeft value in IE6 (other versions not tested) incorrectly ignores the border width on a DIV when there is a width:...
by: phil-news-nospam | last post by:
Here is a simpler (no drop shadows) example of the padding bug I see: http://phil.ipal.org/usenet/ciwas/2006-05-08/buttons-1.html So far I find nothing in the CSS2 document that says I should...
by: Jeb Hunter | last post by:
Well, how can I describe this succinctly? I have a page with DIVs that us background images to produce a border effect. It works perfectly well, but I want to make up (for now) 3 different...
by: cbjewelz | last post by:
Hey. I'm creating a horizontal boxed CSS menu for my site using lists. I wish to achieve a main menu bar something like this: http://kurafire.net/log/ however when I add borders to my code it...
by: mark4asp | last post by:
How can I get spans which look like buttons. These buttons have a fixed height (24px), variable width, a thin (1px) solid border and a background image. The back-ground image is a slice 24px...
by: Hendrik Maryns | last post by:
Hi, At this website: http://tcl.sfs.uni-tuebingen.de/~hendrik/keyboard.shtml, just below the section ‘Sample .xmodmap file’, you see some keys which are modeled with <kbd>. The border...
by: nicstel | last post by:
Hello, I'm trying to find documentation about the xlwt (py_excelerator). I want to change the border of some cells. But the only types that I found is: double and dashed. How to do a simple line...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...

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.