Background can't position right

HTML

<div id="container">
    <div id="text1">
        Content Goes Here
    </div>
    <p>Lorem ipsum dollar sit amet</p>
</div>

CSS

p {
    float: left;
    display: inline;
}
#container {
    margin: 10px 5%;
    background-color: #ff0000;
    width: 90%;
}
#text1 {
    margin: 10px 25%;
    background-color: #00ff00;
    width: 300px;
    float: left;
}