CSS for "fill parent width?"

Have you tried: width: 100%; ?


Depending on what you inner item is, there are various approaches.

If it's a block-level element (a paragraph, a div, etc.), it will automatically adjust itself to fill 100% of the container's width.

If it's an inline element, too bad for you, it won't accept width:100% until you convert it to a block-level element: display:block.

Floated elements are a special case: they will only span to the width of their inner content, even if they're block level elements. They require width:100%.

Absolutely positioned elements are even tougher: they need width:100%, but the container also needs a positioning context, eg. position:relative.

Examples of all four cases: http://jsfiddle.net/dD7E4/


If the inner element is not a div and has padding or margin, flexbox might be the best solution:

<div class="container">
    <div class="filler"></div>
</div>
.container {
    display: flex;
}
.filler {
    flex-grow: 1;
}

See also this answer about how to fill remaining vertical space.


div is a block element and by default fill his parent.
if it doesn't you probably use float:left or float:right or display:inline or your parent is not 800px.
(maybe you should try with style="width:800px" or width="800px" instead of width="800")
I usually put a color border to see how it works.