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

html css cross-browser parent-child
mate64 picture mate64 · Jul 6, 2011 · Viewed 191.9k times · Source

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

Answer

thirtydot picture thirtydot · Jul 6, 2011

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.

Related questions

How do I style a <select> dropdown with only CSS?

Is there a CSS-only way to style a <select> dropdown? I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in …

Read More
How to align checkboxes and their labels consistently cross-browsers

This is one of the minor CSS problems that plagues me constantly. How do folks around Stack Overflow vertically align checkboxes and their labels consistently cross-browser? Whenever I align them correctly in Safari (usually using vertical-align: baseline on the input), …

Read More
What is a clearfix?

Recently I was looking through some website's code, and saw that every <div> had a class clearfix. After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix? Could you …

Read More