CSS: Parent-Div does not grow with it's children (horizontal)

css width parent
vyden_st picture vyden_st · Mar 30, 2010 · Viewed 17k times · Source

I would like the parent-div (red) to grow with the green child-div. Now it just stops at the viewport.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>simple document</title>
<style type="text/css">
 * {
  font-family: verdana;
  margin: 0px;
  padding: 0px;
 }
</style>
</head>
<body>
<div style="margin: 30px; background: red; padding: 10px;">
 <div style="background: green; width: 2000px;">dxyf</div>
</div>
</body>
</html>

I don't want to use display:table; since it does not work well in IE.

Any ideas?

Answer

Josh Stodola picture Josh Stodola · Mar 30, 2010

Use display: inline-block; on the parent <div> and it will work as expected

Related questions

How can I make a div not larger than its contents?

I have a layout similar to: <div> <table> </table> </div> I would like for the div to only expand to as wide as my table becomes.

Read More
How to set up fixed width for <td>?

Simple scheme: <tr class="something"> <td>A</td> <td>B</td> <td>C</td> <td>D</td> </tr> I need …

Read More
How to make a div fill a remaining horizontal space?

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

Read More