开发者

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?


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


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


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.


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


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.


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%;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜