I have a container div without an explicit width set. This container holds a series of divs that are floated to the right.
The width of the container div should be set to the width of the longest 'row' of floated content. However, the width of the container is instead being set to the width of the largest individual item. This means that I'm getting float drops on basically all of the content. Here is some sample code (working correctly in Chrome and Firefox) that illustrates the problem.
The width of the container div should be set to the width of the longest 'row' of floated content. However, the width of the container is instead being set to the width of the largest individual item. This means that I'm getting float drops on basically all of the content. Here is some sample code (working correctly in Chrome and Firefox) that illustrates the problem.
<html>
<head>
<style>
.container {
float: right;
border: 1px solid red;
}
.bar {
height: 20px;
background-color: black;
width: 100%;
float: right;
clear: both;
}
.box {
float: right;
height: 200px;
}
.box1 { width: 50px; background-color: blue;}
.box2 { width: 200px; background-color: green; }
</style>
</head>
<body>
<div class="container">
<div class="bar"></div>
<div class="box box1"></div>
<div class="box box2"></div>
</div>
</body>
</html>