How can I make the container "shrink wrap" in IE7 when I float both left and right?
Here's an example of the problem: http://jsfiddle.net/ryfvn/
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.
+3
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 .
http://jsfiddle.net/johntrepreneur/QSr6K/2/
<div class="container">
<div class="left">content</div>
<div class="right">content</div>
</div>
<style type="text/css">
.container {
float: left;
padding: 10px 50px 10px 10px;
background-color: green;
position:relative;
}
.left {
float: left;
background-color: red;
}
.right {
background-color: blue;
position: absolute;
right: 10px;
top: 10px;
}
</style>
0
source to share