Look, http://jsfiddle.net/mgpv8qvt/1/ why the underscore goes over the line and not under?

I would like to make a line under the diva without specifying the height - just the dest class will sometimes go in several lines, and if you specify the height, everything will be lost

<div class="obs"> <span class="dest">Приемная (справочная)</span> <span class="phone">8-812-111-11-11</span> </div> <div class="line"></div> .obs{ margin: 20px 0 0 0; } .dest{ float: left; font-size: 16px; font-family: "PF BeauSans Pro",sans-serif; color: #666666; } .phone{ float: right; font-size: 18px; font-family: "PF BeauSans Pro",sans-serif; color: #000; font-weight: bold; text-decoration: underline; } .line{ border-bottom: 1px dashed #000; }

UPDATE http://jsfiddle.net/mgpv8qvt/2/ can be done so, but why then the text is not aligned?

    3 answers 3

    Because you have a parent unit "collapsed" because of float 's.

    overflow: hidden to .obs should help.

    An example in fiddle .

    • Thanks, overflow controls the display of the content of the block element if it doesn’t fit entirely and goes beyond the area of ​​the specified dimensions. How then does this property help here if I have nothing outside the area? - Goshka Tarasov
    • These are the basics of block flow. When you apply float, the flow breaks and the parent collapses. It needs to be cleaned. There are many ways to do this. The most common is overflow. If it does not fit, you can use: after {content: ""; display: block; clear: both}. Inline blocks, blocks hanging on the absolute or flocked blocks do not collapse when you float their children - Anon

    For a parent to be tall, both he and his children must be block or inline-block. Alternatively, you can set overflow, then the block will be added by itself. Well, of course, instead of adding a whole diva for the sake of a single line, you can set the color of the lower border on the parent itself. Like this:

     .obs{ margin: 20px 0 0 0; overflow: auto; /* ответ на вопрос */ border-bottom: 1px solid red; /* просто совет */ }

    Demo: http://jsfiddle.net/kxbj89ty/

      Alternatively, add

       .obs { overflow: hidden; border-bottom: 1px dashed #000; }

      And div.line generally remove from the markup.

      And they googled what clearfix is.