How to create a flexible leader line in div after a label field

Question

<div class="titelcontent">
<div class="name">Name</div>
<div class="hzline"></div>
</div>

I want name div and hzline div to auto fit 100% in titelcontent.

The label (for example, Name) will vary in length and I want the red underline to span the remainding space of the titlecontent div.

How do I achieve the following? It is easy to do this using tables but I can't figure out how to do this via span or div.

Antony · Answer 1 · 2013-04-25T10:40:32.390

3

You can use div like a table by using table-cell.

.titlecontent {
    display: table;
}
.name {
    display: table-cell;
    white-space: nowrap;
}
.hzline {
    display: table-cell;
    border-bottom: 3px solid red;
    width: 100%;
}

See DEMO.

edited Apr 25 '13 at 10:40

answered Apr 25 '13 at 10:35

Antony

14,900
10
46
74

thanks all guys.. i will try and see which one work for me.. but i will use background image.. not border line.. so will see which one will work.. thanks again.. i will report here. – Accore LTD Apr 25 '13 at 12:47
this one work pefrectly .. just not support IE7 .. but i don't much care IE7 now :) thanks man... – Accore LTD Apr 25 '13 at 13:24

score 0 · Answer 2 · answered Apr 25 '13 at 10:44

0

Or an alternative to using display: table:

.name {
    float: left;
}
.line-wrapper {
    display: block;
    overflow: hidden;
    padding-top: 6px;
}
.hzline {
    border-bottom: 3px solid red;
    width: 100%;
}

See example.

answered Apr 25 '13 at 10:44

Nathan Kot

2,392
1
21
31

score 0 · Answer 3 · answered Apr 25 '13 at 10:45

0

I've guessed you are looking something like this. Please find my solution based on my understanding about the image you posted.

HTML

<div>
    <span>Photoshop</span>
</div>
<div>
    <span>Adobe Illustrator</span>
</div>
<div>
    <span>3D Max</span>
</div>
<div>
    <span>Maya</span>
</div>
<div>
    <span>Windows 8 Pro</span>
</div>

CSS

div {
    line-height: 150%;
    border-bottom: 5px solid #d71d00;
}

div span{
    position:relative;
    bottom: -10px;
    background:#fff;
    padding: 0 5px;
    color:#82439a;
    font-size: 16px;
    font-weight: bold;
    font-family: tahoma;
}

Please do let me know your feedback. Thanks

answered Apr 25 '13 at 10:45

Rupam Datta

1,849
1
21
36

. my page body have background. and the line i need to 100% width that would be background image. ... your current code not work me, which i am looking for.. can u try for me with background image as line and without background color inner.. thanks u so much – Accore LTD Apr 25 '13 at 13:23
Cool. You possibly have got a solution. Thanks for the feedback. Cheers! – Rupam Datta Apr 26 '13 at 05:31

score 0 · Accepted Answer · edited May 23 '17 at 12:28

Updated to allow background images to show through

You can make the mark-up a bit tighter by using a pseudo-element as follows:

<div class="wrapper">
    <div class="inner">Photoshop</div>
</div>

and use the following CSS styling:

div.wrapper {
    color:#82439a;
    font-size: 16px;
    font-weight: bold;
    font-family: tahoma;
    line-height: 180%;
    background: red url(http://placekitten.com/1000/500) no-repeat left top;
    overflow: hidden;
}

div.inner {
    position: relative;
    display: inner;
    color: yellow;
    padding-right: 0.50em;
    border: 1px dotted yellow;
}

div.inner:after {
    content: "\A0";
    position: absolute;
    bottom: 0;
    left: 100%;
    border-bottom: 5px solid #d71d00;    
    width: 1000%;
}

Demo fiddle: http://jsfiddle.net/audetwebdesign/wE8bC/

How It Works

The parent element div.wrapper may contain a background image or be transparent and show the background of some ancestor element. You need to set overflow: hidden.

For the label (<div.inner>), set position: relative and then generate a 100% width pseudo-element with a bottom border to serve as an underline. Use absolute positioning to place div.inner:after to the right of <div.inner> (left: 100%) and make the width relatively large. The pseudo-element will trigger an overflow condition but this is taken care of by hiding the overflow in the parent element. You can control left/right spacing using padding.

You can use set the display property to either inline or inline-block. If you use display: inline, it will work in IE7; adjust the line height as needed for styling.

Note that the generated content is a non-breaking space, hex code "\A0".

Support for IE7

If you need to support IE7, you will need a hack if you use inline-block as discussed in a previous question: IE7 does not understand display: inline-block

IE7 also does not support table-cell so some of the other posted solutions will face the same limitation.

IE7 not support table-cell ture.. your one nice solution but i can't use div.inner background color. my page body have background. and the line i need to 100% width that would be background image. ... your current code not work me, which i am looking for.. can u try for me with background image as line and without background color inner.. thanks u so much — Accore LTD, Apr 25 '13 at 13:23
@AccoreLTD I was able to modify the CSS to allow the background to show through. Please check the updated answer and fiddle. — Marc Audet, Apr 25 '13 at 15:01
@March ... cool man... actual what i wanted... see this..http://jsfiddle.net/wE8bC/7/ your code also work ... and support IE7 .. right ? — Accore LTD, Apr 25 '13 at 15:07
@AccoreLTD In your fiddle, multiple lines, increase the width of the pseudo-element, say 4000% or 3000px, so that the element fills up the width of the root element. I assume you will replace it with an image of line segment (use repeat-x). — Marc Audet, Apr 25 '13 at 15:16
@AccoreLTD The code will work if you use display: inline for the pseudo-element, so the code will work in IE7 without a hack. — Marc Audet, Apr 25 '13 at 15:25

How to create a flexible leader line in div after a label field

4 Answers4

Related