How can I make the container "shrink wrap" in IE7 when I float both left and right?

Here's an example of the problem:

In IE7, the container becomes full width and loses its shrink wrap. This does not happen if both children float to the left, or if both float to the right.


source to share

2 answers

Had the same problem and couldn't find an answer using float right, but I was able to get the same effect using absolute positioning .

<div class="container">
    <div class="left">content</div>
    <div class="right">content</div>

<style type="text/css">
    .container {
            float: left;
            padding: 10px 50px 10px 10px;
            background-color: green;

    .left {
            float: left;
            background-color: red;

    .right {
            background-color: blue;
            position: absolute;
            right: 10px;
            top: 10px;




Add width to the element .container




All Articles