CSS for "fill parent width?"

Question

I have an item on the DOM that I'd simply like to have fill its parent's width, regardless of what that is:

<div width="800">
    <div class="filler"></div>
</div>

How can I specify in CSS that the filler class match the width of its parent?

.filler {
    ?
}

By default a block level element (eg `div`) will fill it's parent... you can specify `width:100%;` too if you want, although that's the default, and will cause issues if you have padding/margin/borders in some browsers ;) — Rudu, Mar 16 '11 at 19:49
Does this answer your question? [How to make CSS width to fill parent?](https://stackoverflow.com/questions/2232440/how-to-make-css-width-to-fill-parent) — Abdollah, Apr 12 '20 at 15:34

score 62 · Accepted Answer · answered Mar 16 '11 at 19:48

62

Have you tried: width: 100%; ?

answered Mar 16 '11 at 19:48

BinaryTox1n

3,486
1
36
44

9

Doesn't that mean that `a`'s width should be 100% of the actual browser? When I've done it in the past, I'm pretty sure that's what the outcome has been. – Naftuli Kay Mar 16 '11 at 19:50
3

@TK No, unless absolute positioning is specified, the dimensions are relative to the parent element. – BinaryTox1n Mar 16 '11 at 19:51
What about the height?? In my case the inner element is an `a` (idk if that makes a difference), but `height:100%;` did not do the trick. – Michael Dorst Mar 22 '20 at 04:20
Just realized the question was specifically about the width. My bad. – Michael Dorst Mar 22 '20 at 04:22

score 50 · Answer 2 · answered Mar 16 '11 at 20:03

50

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/

answered Mar 16 '11 at 20:03

mingos

23,778
12
70
107

it's possible to assign `width:100%` to inline elements such as span or inline-block. – Magne Sep 28 '13 at 14:07
@Magne, I beg to differ. Inline-block will happily accept `width:100%` due to its block-like nature, but a barebones, unstyled `span` will not. – mingos Sep 30 '13 at 07:58
you might be right about the `span`. I haven't tested that. But both inline-block and span are treated as inline elements outside, so I assumed that the behaviour would be the same.. – Magne Sep 30 '13 at 14:15
2

It is not. An unstyled `span` has `display:inline` and its width cannot be set. If it's styled with `dipsplay:inline-block`, it starts sharing the properties of both displays: it appears in the document flow similarly to an inline element, but its dimensions can be forced just as if it was a block element. – mingos Oct 03 '13 at 11:14

score 6 · Answer 3 · answered Feb 03 '21 at 09:42

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.

score 2 · Answer 4 · answered Mar 16 '11 at 20:02

Unless there's something stopping them, block-level elements such as div and p will always fill the entire width of their container. If you have an inline element such as a span or an a, you could style it as display: block to turn it into a block-level element, but this will also put a line break before and after it.

score 1 · Answer 5 · answered Mar 16 '11 at 19:55

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.

score 0 · Answer 6 · answered May 18 '21 at 07:36

0

By default it will fill its parent element's width as div is an block element.

answered May 18 '21 at 07:36

Sandeep K Goyal

280
2
9

CSS for "fill parent width?"

6 Answers6

Linked

Related