CODEWITHSUNDEEP
csshtml
Cedric Reichenbach
Cedric Reichenbach

Reputation: 9319

Why does <hr> not do a line break?

In the snippet, the two divs should appear below each other, as if seperated thru a line break. Instead, the two divs are kind of next to each other, although the second one is a bit lower than the first. Why is that? How do I get the <hr> to line break?

<!DOCTYPE html>
<head><title>DoodleDebug</title>
<style>hr{padding:2pt;border:0;}span{float:left;width:40px;}.ColorPlugin{}</style>
</head>
<body>
<div><span style="background-color:#1a63cb">&#160;&#160;&#160;</span>
</div>
<hr>
<div><span style="background-color:#1a63cb">&#160;&#160;&#160;</span>
</div>

I'm using the latest Firefox.

Upvotes: 3

Views: 5889

Answers (5)

Vilx-
Vilx-

Reputation: 107052

The problem is with the floating spans. They are taken outside of the normal flow (sort of), so the divs end up being 0 height. Well, the second one does, the first one is still a few px high because of the hr. Anyways, both divs together are much smaller than the spans which overflow them. Hence the second span is much higher than you would expect. And since floats don't overlap each other, the second span is placed a little to the right to acommodate that (while still retaining the original vertical position).

A solution then depends on what you want to achieve. I understand that this is a dumbed-down example, so I can't see the bigger picture. My first attempt would be to get rid of the float entirely. Most of the time they create more headaches than solutions anyway. Options here are to use display: inline-block or just rearranging your HTML somehow.

The second attempt would be to use clear, which was suggested below by Brad Christie.

Upvotes: 9

Zo Has
Zo Has

Reputation: 13038

Because there is a float:left property in your code, remove it & you have your desired effect.

  <style>hr{padding:2pt;border:0;}span{width:40px;clear:both;}.ColorPlugin{}</style>
</head>
<body>
<div><span style="background-color:#1a63cb">&#160;&#160;&#160;</span>
<hr>
<div><span style="background-color:#1a63cb">&#160;&#160;&#160;</span>

Upvotes: 1

Andres I Perez
Andres I Perez

Reputation: 75409

Your're floating your span tags instead of your divs, which are separated by a containing div. Add div { float:left } instead to float the actual span containers..

Upvotes: 2

Brad Christie
Brad Christie

Reputation: 101614

It's your float that's interrupting how it displays. You're telling the browser to display the contents next to each other when you specify a float. However, if you apply a clear:both on the <hr> you get the desired effect:

<!DOCTYPE html>
<html>
    <head>
        <title>DoodleDebug</title>
        <style>hr{padding:2pt;border:0;}span{float:left;width:40px;}.ColorPlugin{}</style>
    </head>
    <body>
        <div><span style="background-color:#1a63cb">&#160;&#160;&#160;</span></div>
        <hr style="clear:both;">
        <div><span style="background-color:#1a63cb">&#160;&#160;&#160;</span></div>
    </body>
</html>

Upvotes: 4

rauschen
rauschen

Reputation: 3996

hr - is a horizontal line and no line break .. for a line break use

<br>

Upvotes: 1

Related Questions