CODEWITHSUNDEEP
csshtml
Konstantinos
Konstantinos

Reputation: 973

HTML - CSS hr issue

Hi i had a problem today configuring my html page. My sample code is:

<div style="width: 100%">
    <div style="width: 80%; float: left;">
        Text on div 80%
    </div>
    <div style="width: 20%; float:right">
        text on div 20%
    </div>
</div>
<hr>Text after hr

and as you can see the hr doesnt do his job because it dont show up where i set it to.

It should be like the following:

<div style="width: 100%">
    <div style="width: 80%; float: left;">
        Text on div 80%
    </div>
    <div style="width: 20%; float:right">
        text on div 20%
    </div>
</div>Only if i add text in this position the following hr works, how to fix it?
<hr>Text after hr

the problem is that after the div the hr doesnt show up!

I need to put some text before.. why it does that?

Upvotes: 0

Views: 2172

Answers (2)

G.L.P
G.L.P

Reputation: 7217

Try like this: Demo

CSS:

hr{
    clear:both;
    height:2px;
    border-bottom:1px solid #ccc;
}

Upvotes: 0

l&#39;L&#39;l
l&#39;L&#39;l

Reputation: 47292

The <hr> is there, only so small you need an electron microscope to see it. Try:

<hr style="width: 100%; float:left">Text ...

Example:

http://jsfiddle.net/pqaukpjf/7/

Also Note:

Differences Between HTML 4.01 and HTML5

  • In HTML5, the <hr> tag defines a thematic break.
  • In HTML 4.01, the <hr> tag represents a horizontal rule.

The <hr> tag is now defined in semantic terms, rather than presentational terms. All the layout attributes are removed in HTML5. Use CSS instead.

Upvotes: 2

Related Questions