How can stop a container div allowing contents to overflow?
Ok, quick ficticious example:
<div style="background: #CCC; margin: 10px;">
<div style="width: 50%; height: 400px; background: #FFF;">Child #1</div>开发者_如何学运维;
<div style="width: 600px; height: 400px; background: #999;">Child #2</div>
</div>
If I resize the browser to less than 600px wide (child #2), how can I stop the parent div from keeping on shrinking to the browser window (and shrinking child #1 in the process).
In essence how can I prevent a container div from shrinking any further when it hits the widest child inside itself?
Contents are dynamic so cannot specify widths of children, I just set the width of child #2 to illustrate the issue. It's the same if there were any element of specific width (e.g. an image or fully shrunken table etc.)
I am not 100% sure what you are trying to do with your webpage by allowing the outer elements to expand and contract but forcing the innards to set sizes, but the first thing I would suggest is to set the min-width css attribute on your outer div. The problem you will run into doing this is that you now have specified the same value in two different places (which for css2 is just a way of life).
To my knowledge there is no css attribute to limit the width of a parent to the size of its children. You could replace the outer div with a table if that functionality is absolutely necessary, but it is probably a better idea to re-evaluate your design. Perhaps if you could lay out a few more specifics of why this is necessary we could assist further.
Based on your comments, you could try something like this:
<html>
<head>
<title>Hi</title>
</head>
<body style="margin: 0; padding:0;">
<table style="background: red;padding:100px;width:100%;" cellspacing="0"><tr><td>
<table style="background: #CCC; width:100%;border:none;" cellspacing="0"><tr><td>
<div style="width: 50%; height: 400px; background: #FFF;">Child #1</div>
<div style="width: 600px; height: 400px; background: #999;">Child #2</div>
</td></tr></table>
</td></tr></table>
</body>
</html>
The reason you must have nested tables is because the outside table lets you control the margin/padding of what would otherwise be the html or body tags. When you apply margin to body it does not affect the width of the page, and you always end up with a scroll bar across the bottom. Nesting the tables and letting the outside table mimic it using padding solves the issue. (Other people could probably come up with a more elegant solution)
That being said, if your container div is just setting the background color, you could just set the background color of the screen. If your web page is left justified (something my designer friends would shoot me for), the browser window would handle the effect for you.
Inspired by NickLarsen's thoughtful and complete answer: try display: table-cell on your container.
加载中,请稍侯......
精彩评论