Why float is not working inside the contact

HTML-CSS
1 
<!doctype html>
<html>
<head>
<style>
#contact {
    border: 1px solid red;
    height: auto;
    width: 100%;
    padding: 20px 5px;
    background-color: rgba(252, 252, 203, .8);
    font-size: x-large;
}
#col-45 {
    border: 1px solid red;
    float: left;
    height: 160px;
    width: 45%;
}
#col-55 {
    border: 1px solid red;
    float: right;
    padding: 0 10px;
    height: 160px;
    width: 55%;
}
</style>
</head>
<body>
<div id="contact">
        <div id="col-45">
            <address>
                AP'S FOOD <br>
                Shop no38, Sanmar Ocean city, Southern street <br>
                Bahaddarhat, Chandgaon, Chittagong shadar <br>
                Chattagram
            </address>
            <p>contact: <i class="fab fa-facebook"></i> <i class="fab fa-github"></i> <i class="fab fa-twitter"></i> <i class="fas fa-phone-volume"></i></p>
        </div>
        <div id="col-55">
            <fieldset>
                <legend> If you anything to say or report anything you can send a mail to us from here.</legend>
                <form action="https://www.freecodecamp.com/email-submit" id="form">
                    <label for="email" class="col-20">Email:</label>
                    <input type="email" name="email" id="email" placeholder="your Email" class="col-80"><br>
                    <label for="text" class="col-20">Your massage:</label>
                    <textarea name="text" id="text" class="col-80"></textarea> <br>
                    <input type="submit" name="submit" id="submit" value="submit">
                </form>
            </fieldset>
        </div>
    </div>
	</body>
	</html>
2

It actually is working. If you get rid of the side padding and borders you will see that the col-55 div floats to the right of the col-45 div.

But you don’t want to use floats for this. You probably want to use flexbox:

1 Like
3

got this bro… height was the prblm