...

View Full Version : Width of <div>. How to determine?



donmateo
09-12-2007, 03:38 PM
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:thumbsup:

ahallicks
09-12-2007, 04:57 PM
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)

Fang
09-12-2007, 05:07 PM
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

<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

donmateo
09-12-2007, 07:12 PM
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

Fang
09-12-2007, 08:36 PM
No, none of the children have any margin, border or padding.

donmateo
09-12-2007, 09:02 PM
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?

Fang
09-12-2007, 09:34 PM
337+336=673 The borders(not correctly defined) on the parent div are irrelevant here.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum