CODEWITHSUNDEEP
csswidthparent
vyden_st
vyden_st

Reputation: 161

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

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?

Upvotes: 16

Views: 18649

Answers (6)

PKHunter
PKHunter

Reputation: 706

There's too much complicated advice here. Here's a tip: instead of tinkering with table-cells, and clear and floats, just make sure the child has a border that's equivalent to the padding you were looking for the parent. Borders are always drawn outside, so it'll do what you want.

This should work... 

<div style="margin: 30px; background: red;">
 <div style="background: green; width: 2000px; border: 10px red solid">dxyf</div>
</div>

...in all browsers, without a problem. HTH.

Upvotes: 0

Bang
Bang

Reputation: 1132

Use display:table; on the parent div. Or you can put the parent div into a cell of a table.

Upvotes: 0

UpTheCreek
UpTheCreek

Reputation: 32391

See this solution from quirksmode.org. It's pretty simple, just apply this class to the container/parent div:

div.container {
    overflow: hidden;
    width: 100%;
}

Upvotes: -1

Jean-Francois
Jean-Francois

Reputation: 1342

I know I'm late, but here's what I do to fix the problem:

Add the clear INSIDE the parent at the bottom, and make the parent overflow: hidden.

Here's the modified code:

.clear{
    clear: both;
    /* make sure there is no height set to it */
    line-height: 0;
    height: 0;
    font-size: 0em;
}

<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;">
 <div style="background: green; width: 2000px;">dxyf</div>
 <div class="clear">/div>
</div>

Works in FF3 and IE7, but not tested in other browsers though.

Hope to, at least, help you with your problem.

Upvotes: 1

Paul
Paul

Reputation: 9012

Make the parent div float:left; and it will be expanded as desired.

Upvotes: 3

Josh Stodola
Josh Stodola

Reputation: 82513

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

Upvotes: 32

Related Questions