Jump to content

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


limitphp

Recommended Posts

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.

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.