CODEWITHSUNDEEP
htmlcsscss-float
DropKick
DropKick

Reputation: 13

Why is the hr on same line as div element even after applying hr after closing div tag

i have two div elements that float on both sides (Left And Right). i applied hr tag after closing the first div tag (That floats left) and before opening the next div tag (That floats right). But the hr tag is displayed at the top background. To see the hr tag, see the small connecting line between the two divs (At the top).

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.leftmovie {
        border: solid;
        float: left;
        width: 47%;
        margin-left: 2em;
        height: 400px;
    }
    .rightmovie {
        border:solid;
        float: right;
        width: 47%;
        margin-right:2em;
        height:400px;
    }
</style>
</head>
<body>
<div class="Row">
        <div class="leftmovie">
            <span class="Star">ergjkh<br>kdjnkj</span>
        </div>
        <div class="rightmovie">legnlejgn<br>gegerge</div>
    </div>
    <hr>
    <div class="Row">
        <div class="leftmovie">
            <span class="Star">ergjkh<br>kdjnkj</span>
        </div>
        <div class="rightmovie">legnlejgn<br>gegerge</div>
    </div>
</body>
</html>

Upvotes: 0

Views: 466

Answers (1)

Satish Modha
Satish Modha

Reputation: 777

Because you don't use clear: both after applying float property.

Add this in hr tag.

hr {
    display: inline-block;
    width: 100%;
}

Upvotes: 2

Related Questions