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

- 

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

i want name div , hzline div auto fit 100% in titelcontent.

the label (for example, name) vary in length , want red underline span remainding space of titlecontent div.

how achieve following? easy using tables can't figure out how via span or div.

http://s22.postimg.org/zdxtj9da9/untitled_1.png

updated allow background images show through

you can make mark-up bit tighter using pseudo-element follows:

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

and use 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 works

the parent element div.wrapper may contain background image or transparent , show background of ancestor element. need set overflow: hidden.

for label (<div.inner>), set position: relative , generate 100% width pseudo-element bottom border serve underline. use absolute positioning place div.inner:after right of <div.inner> (left: 100%) , make width relatively large. pseudo-element trigger overflow condition taken care of hiding overflow in parent element. can control left/right spacing using padding.

you can use set display property either inline or inline-block. if use display: inline, work in ie7; adjust line height needed styling.

note generated content non-breaking space, hex code "\a0".

support ie7

if need support ie7, need hack if use inline-block discussed in previous question: ie7 not understand display: inline-block

ie7 not support table-cell of other posted solutions face same limitation.


Popular posts from this blog

Php - Delimiter must not be alphanumeric or backslash -

-
this question has answer here: delimiter must not alphanumeric or backslash , preg_match 5 answers this question has been asked don't know how fix problem in situation. getting following php errror: php message: php warning: preg_match(): delimiter must not alphanumeric or backslash in... on line 227 line 227 following: if (preg_match($match, $_server['http_user_agent'])) and function: $oslist = array ( 'windows 3.11' => 'win16', 'windows 95' => '(windows 95)|(win95)|(windows_95)', 'windows 98' => '(windows 98)|(win98)', 'windows 2000' => '(windows nt 5.0)|(windows 2000)', 'windows xp' => '(windows nt 5.1)|(windows xp)', 'windows server 2003' => '(windows nt 5.2)', 'windows vista' => '(windows nt 6.0)', 'w...
Read more

Delphi interface implements -

-
i expect reference counting should work on outer aggregating object in interface implementation. if can refer example: clarity in classes implementing multiple interfaces (alternative delegation): here minimal reproduction of behaviour: program so16210993; {$apptype console} type ifoo = interface procedure foo; end; tfooimpl = class(tinterfacedobject, ifoo) procedure foo; end; tcontainer = class(tinterfacedobject, ifoo) private ffoo: ifoo; public constructor create; destructor destroy; override; property foo: ifoo read ffoo implements ifoo; end; procedure tfooimpl.foo; begin writeln('tfooimpl.foo called'); end; constructor tcontainer.create; begin inherited; ffoo := tfooimpl.create; end; destructor tcontainer.destroy; begin writeln('tcontainer.destroy called');//this line never runs inherited; end; procedure main; var foo : ifoo; begin foo := tcontainer.create; foo.foo; end; begin main; readln...
Read more

css - invalid property value for padding -

-
i getting invalid property value padding , don't know why. code written in ruby btw. when check browser has right value pixels, crossed out w line , isn't reading attribute. in advance. <% mywaldo = mapping::mywaldos.sample %> <!doctype html> <html> <head> <title>sinatra single-serve</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/> <style> div { width: 1024px; height: 768px; background-image: url("img/waldos/<%= mywaldo[0]%>") ; } #waldo { position:absolute; top: <%= mywaldo[2]%>; left: <%= mywaldo[1]%>; padding: <%= mywaldo[3]%>, <%= mywaldo[4]%>; } </style> </head> <body> <div> <a id="waldo" href="">aa</a> </div> <%= yield %> </body> ...
Read more