Is a div by default the same width as whatever object it is in?

[limitphp]

so if a div is in a td where the width is 50% of the page, the default width of the div will be 50%?

 

That is the behavior in firefox.  Is there a default value that makes this happen?

margin or something?  Something I can set to 0 in the css style sheet?

 

thanks

 

[haku]

A div by default is as wide as it can be. So if the item its contained in has padding, then the div will be as the inside of the containing element, minus the paddings that that element has. If the div itself has a margin, then the width of the margins will also be subtracted from the width of the div.

 

You should probably read more about the box model to understand how this all works. It's essential if you want to learn CSS and use it well.

 

Browsers have default settings for the padding and width on each element (sometimes the default is zero). To remove default paddings and margins, you will have to explicitly set them to zero.

[limitphp]

A div by default is as wide as it can be. So if the item its contained in has padding, then the div will be as the inside of the containing element, minus the paddings that that element has. If the div itself has a margin, then the width of the margins will also be subtracted from the width of the div.

 

You should probably read more about the box model to understand how this all works. It's essential if you want to learn CSS and use it well.

 

Browsers have default settings for the padding and width on each element (sometimes the default is zero). To remove default paddings and margins, you will have to explicitly set them to zero.

 

Well, I read thought he link.  thanks.

 

Problem is, I tried setting the margins and padding of both the td and the div inside the td all to 0.

 

The div still stays as wide as the td (50%).

 

Why do divs stay as wide as the objects they are in and tables do not?

 

If I have "asdasdasd" inside a table with no width specified....the table is only as wide as that text.

 

if I have "asdasdasd" inside a div with no width specified...the div is as wide as the object it is inside....regardless of padding and margins.

 

Is there anyway to get a div to act like a table in that respect, besides using float?

 

[haku]

You can set the display of the div to 'inline', and it will act like that. But it doesn't usually make sense to do that if you are using semantic markup.

 

On top of that, using tables for page layout is outdated. They are only supposed to be used for tabular data - i.e. data that is cross referencing two category types.

 

That site I linked you to - HTML dog - has a really good reputation for their tutorials. I never actually used them myself (I learned CSS a different way), but if you want to make pages the way that they are being made these days, then I would really suggest spending some time doing the tutorials on that site.

 

Good luck!

[limitphp]

You can set the display of the div to 'inline', and it will act like that. But it doesn't usually make sense to do that if you are using semantic markup.

 

On top of that, using tables for page layout is outdated. They are only supposed to be used for tabular data - i.e. data that is cross referencing two category types.

 

That site I linked you to - HTML dog - has a really good reputation for their tutorials. I never actually used them myself (I learned CSS a different way), but if you want to make pages the way that they are being made these days, then I would really suggest spending some time doing the tutorials on that site.

 

Good luck!

 

tables for layout is outdated?

 

Lets say I have a page where I want two columns (column 1 I want to be 60% width of page, column 2 I want to be 40% width), how do I do this without tables?

[haku]

Well, there are a few different ways. One of the easiest is to do something like this:

HTML:

<div id="left"></div>
<div id="right"></div>

 

CSS:

#left
{
  width: 40%;
  float: left;
}
#right
{ 
  width: 60%;
  float: left;
}

 

 

[limitphp]

Well, there are a few different ways. One of the easiest is to do something like this:

HTML:

<div id="left"></div>
<div id="right"></div>

 

CSS:

#left
{
  width: 40%;
  float: left;
}
#right
{ 
  width: 60%;
  float: left;
}

 

 

 

So, is that the best way, using divs to layout the infrastructure?

 

 

 

[limitphp]

I have a div, and I set the style='width to 100%'

I have left and right padding.  The div is taking up more than the page.  There's a horizontal scroll bar.  Is there a reason the div style='100%' width is bigger than the page?

 

nevermind....it was the padding that made it larger than the page.

 

I thought padding takes place inside the div, not outside.  oh well, now I know...no big deal.

[limitphp]

thanks for the info, by the way!

 

you have freed me from my table prison!

: )

[limitphp]

There is a problem with divs....

it seems in IE, you cannot float divs within a div that is floated.

 

In other words....

two columns (div1 float left, div2 float right)

 

in div2 if you put floated divs....No NO.....trouble....will not work in IE

 

tables do not have this problem....

 

for now....if I need floating divs inside of floating divs, I'll use a table instead.