Cross browser method to fit a child div to its parent's width

Question

I'm looking for a solution to fit a child div into it's parent's width.

Most solutions I've seen here are not cross-browser compatible (eg. display: table-cell; isn't supported in IE <=8).

image showing intended result with a child div being the full size of it's parent, with inner padding

If I get your right, just do not declare width on child. – Ivan Ivanic Jul 06 '11 at 08:29 — Ivan Ivanic, Jul 06 '11 at 08:29

thirtydot · Accepted Answer · 2018-06-28T07:47:08.910

96

The solution is to simply not declare width: 100%.

The default is width: auto, which for block-level elements (such as div), will take the "full space" available anyway (different to how width: 100% does it).

See: http://jsfiddle.net/U7PhY/2/

Just in case it's not already clear from my answer: just don't set a width on the child div.

You might instead be interested in box-sizing: border-box.

edited Jun 28 '18 at 07:47

answered Jul 06 '11 at 08:25

thirtydot

224,678
48
389
349

3

I think there is only one child? – Ivan Ivanic Jul 06 '11 at 08:28
Yup, I think you're right. The diagram confused me :( Luckily, I'd already written the "second part" of my answer, and that is the actual answer here. – thirtydot Jul 06 '11 at 08:29
you don't need to declare width attribute for child at all. – Daniel Gruszczyk Jul 06 '11 at 08:41
1

It's possible a style property that is part of a component you've included in your project is setting the `width` property and causing a problem. In this case, explicitly set `width: auto` for the child div. – StackOverflowUser Nov 23 '15 at 09:17

score 32 · Answer 2 · answered Oct 31 '14 at 14:46

32

You can use box-sizing css property, it's crossbrowser(ie8+, and all real browsers) and pretty good solution for such cases:

#childDiv{
   box-sizing: border-box;
   width: 100%; //or any percentage width you want
   padding: 50px;
}

Fiddle

answered Oct 31 '14 at 14:46

Y.Puzyrenko

2,166
1
15
23

Steeven · Answer 3 · 2011-07-06T08:49:38.610

3

If you put position:relative; on the outer element, the inner element will place itself according to this one. Then a width:auto; on the inner element will be the same as the width of the outer.

edited Jul 06 '11 at 08:49

answered Jul 06 '11 at 08:31

Steeven

4,057
8
38
68

1

Then just remove `width:100%;` and the box will fit in automatically. – Steeven Jul 06 '11 at 08:47

score 2 · Answer 4 · answered Jul 06 '11 at 08:34

2

In your image you've putting the padding outside the child. This is not the case. Padding adds to the width of an element, so if you add padding and give it a width of 100% it will have a width of 100% + padding. In order to what you are wanting you just need to either add padding to the parent div, or add a margin to the inner div. Because divs are block-level elements they will automatically expand to the width of their parent.

answered Jul 06 '11 at 08:34

Alex

7,320
1
18
31

i've uploaded a new image - sorry for the bad diagram ! of course i do know what padding means ;) – mate64 Jul 06 '11 at 08:45

score 2 · Answer 5 · edited May 23 '12 at 14:33

2

You don't even need width: 100% in your child div:

http://jsfiddle.net/DanielDZC/w2mev/1/

edited May 23 '12 at 14:33

Peter DeWeese

18,141
8
79
101

answered Jul 06 '11 at 08:38

Daniel Gruszczyk

5,379
8
47
86

score 1 · Answer 6 · edited May 23 '12 at 14:32

1

In case you want to use that padding space... then here's something:

http://jsfiddle.net/qD4zd/

All the colors are background colors.

edited May 23 '12 at 14:32

Peter DeWeese

18,141
8
79
101

answered Jul 06 '11 at 08:42

Joonas

7,227
9
40
65

Cross browser method to fit a child div to its parent's width

6 Answers6

Linked

Related