Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Width of <div>. How to determine?

    I would just like to know the actual width of the div in the css below.

    body
    {
    margin: 0px;
    text-align: center;
    }


    #mainbody
    {
    width: 675px;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    margin-left: auto;
    margin-right: auto;
    }

    I have the margins set to auto so it will center in FF. Does that mean the actual width of the mainbody <div> changes depending on the size of the browser window? Or are the margins not included in the width of the <div>?

    Lets say I want to nest a few other <div>'s inside my mainbody <div>. How would I calculate that width? Do the borders come into play when making that calculation? In other words, is the actual width of the <div> different from the "content" area of the <div>?

    Thanks for the help. Great forum as well

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    The width will be that specific width on any resolution/screen size. It'll look smaller on higher resolutions because of the pixel to screen size ratio, but it is the same.

    To nest the divs in the main body they would have to add up to the overall width, 675px, complete (that is the width of the divs and any padding applied to them)
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    Does that mean the actual width of the mainbody <div> changes depending on the size of the browser window? Or are the margins not included in the width of the <div>
    No, margin:auto means "if there is any space then spread that amount equally on both sides".
    In other words, is the actual width of the <div> different from the "content" area of the <div>
    When it is the child div the total width is width+padding+borders+margin
    Code:
    <div style="background:#ccc; width:300px; height:3em;">
    <div style="background:#9cf; width:290px; padding:3px; border:3px solid red;margin:5px;">The child overflows the parent</div>
    </div>
    IE6 has a different box model, so no overflow occurs. This is fixed in IE7

  • #4
    New Coder
    Join Date
    Sep 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Would the width of the child <div>'s have to equal 673px then?

    #mainbody
    {
    width: 675px;
    border-left: 1px;
    border-right: 1px;
    }

    Since there is a left and right 1px border I would then subtract 2px to get the total width of the content area of the mainbody <div> = 673px.

    #content1
    {
    float: right;
    width: 337px;
    }

    #content2
    {
    float: right;
    width: 336px;
    }

    <div id="mainbody">
    <div id="content1"></div>
    <div id="content2"></div>
    </div>

    Is this correct?

    Matt
    Last edited by donmateo; 09-12-2007 at 07:10 PM.

  • #5
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    No, none of the children have any margin, border or padding.

  • #6
    New Coder
    Join Date
    Sep 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Fang View Post
    No, none of the children have any margin, border or padding.
    This is true.

    My question was though, would I subtract the 2px from the 675px to get the content area of the parent <div> because of the parent <div> borders?

  • #7
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    337+336=673 The borders(not correctly defined) on the parent div are irrelevant here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •