background gradient is removed when using float attribute in css

Question

when using float attribute on div tag, the gradient set as background is removed. The last css property i.e the float attribute in the div.image removes the background.

here is the HTML code

<div class="content">
        <div class="info">
            <h2>Enter details</h2>
            <h3>Username</h3>
            <input type="text" name="username">
            <h3>Password</h3>
            <input type="text" name="password">
        </div>
        <div class="image"><img class="image" src="C:\Users\Desktop\New folder\Picture\light-trails-8.jpg"></div>
    </div>

Here is the css code

div.content{
    background: linear-gradient(to right,#0080ff 50% , lightblue);
    margin:0px;
    padding:0px;
    margin-top: 3px;
    }

img.image{
    width:250px;
    height: 250px;
}

div.info{
    float:left;
}
/***** After applying this style ****/
div.image{
    float:right;
}

here is the screenshot of designed webpage

enter image description here

Answer 1

Children inside div.content are float. Add this to fix:

div.content {
    background: linear-gradient(to right,#0080ff 50% , lightblue);
    margin:0px;
    padding:0px;
    margin-top: 3px;

    /*  Add this */
    overflow:hidden;
    width: 100%;
}