How can I make a div assume 100% of its containing div?

Question

I'm trying to make a div assume 100% of it's parent div. The parent div acts as a page wrapper, so it's already assuming 100% of the page width. I've tried adding width: 100%, but this did not seem to work. I'm a little baffled, because this seems like a relatively simply thing to do.

Answer 1

Don't specify a width at all. For a div element (or any block level element for that matter), this will make it assume 100% width regardless what padding/margin settings it has set.

Depending on the box model, explicitly setting 100% width can actually make the element too wide because paddings are calculated into it.

If this doesn't work, there is some other CSS setting interfering and you need to show more of your layout and HTML code.

Answer 2

display: block;
width: auto;

Should work for you.

Answer 3

You need to show more of your existing css code as normally, a div takes by default the whole space available to it, provided it has some content.

Other than that, make sure you set margin and padding of the parent div to 0.

.parent{
margin:0;
padding:0;
overflow:auto;
}
.child{
margin:0;
padding:0;
}