Contents in the float div overflow issue

Question

I encountered a problem about float style. Like the html code below:

...
<body>
    <div style="float:left;width:25%;height:100px;background-color:red;"></div>
    <div style="float:left;width:74%;height:100px;border:1px solid black;">
        <div style="width:1000px;height:50px;background-color:yellow;"></div>
        <div style="clear:both;"></div>
    </div>
</body>
...

The effect is that the content in the 2th float div overflow. Yellow div is in the float div, but its width exceeds its parent's. I want to know how to set the css style to make the 2th float div can suite its child element's width/height automatically? I know clear style can clear the float of divs listed by order, but how to handle it when it contains a larger child? I don't want to use js to modify parent div's width.

Stephan Stephan · Accepted Answer · 2015-01-08T15:39:31

You can achieve this by using min-height and min-width. This way the parent will always fit the children's height and width when they are bigger.

Check it out here.

Contents in the float div overflow issue

2 Answers