Two part question: Why does my border-image disappear if I remove Float: left, and...

[RKS]

...what can I do in IE? How do you achieve the border-image CSS for Internet Explorer? I don't want to have a fixed width background for fluid purposes and I'd prefer to have the background form to the size of the container (whatever the browser is rendering it.)

Also, in my current code, if I remove float:left from my CSS under the #content ID, the border-image disappears. Even when it was a background img instead of a border it disappeared when I took the float: left off. Here is the code:

<div class="content">
<div id="preview">
<div id="cover"><img src="Images/jormundgr.png" /></div>
<div id="title"><img src="Images/exampleTitle.png" /></div>
<div id="author"><img src="Images/exampleAuthor.png" /></div>
<div id="previewText">
<h5></h5>
<h3>Order Yours Today!</h3>
</div>
</div>

.content {
padding: 10px 0;
width: 90%;
float: left;
margin-left: auto;
margin-right: auto;
border-width:25px 30px 10px 20px;
-moz-border-image:url("images/contentglass2.png") 25 30 10 20 repeat stretch;
-webkit-border-image:url("images/contentglass2.png") 25 30 10 20 repeat stretch;
border-image:url("images/contentglass2.png") 25 30 10 20 repeat stretch;
}

#preview {
width: 90%;
margin-right: auto;
margin-left: auto;
text-align: center;
padding: 40px;
float: left;
}

#cover {
width: 30%;
}

#cover img {
width: 350px;
height: 550px;
float: left;
}

#author img {
float: left;
padding-bottom: 20px;
}

#title img {
float: left;
padding-bottom: 20px;
}

#previewText {
margin-left: auto;
margin-right: auto;
}