1

I'm trying to create a horizontal of sorts that has a "label" inside of it. Ideally this should make a nice looking separator.

I created a JSFiddle here: http://jsfiddle.net/9syqG/

The left part and the heading seem to be work just fine. I just can't get the right part of the line to stretch the remainder of the distance across.

Can anyone help?

krische
  • 1,010
  • 3
  • 11
  • 17
  • Distance across, what do you mean by that? Like `width: 100%;`? – Stan Apr 12 '12 at 21:11
  • I think he is basically trying to create a fieldset with a legend. Something like http://stackoverflow.com/questions/2213881/is-it-possible-to-achieve-a-fieldset-like-effect-without-using-the-fieldset? – Brandon Apr 12 '12 at 21:16
  • So there will be 3 elements in one row. Line, text, Line. The left line is a fixed width, then the text is just the width of the text, and then the right line's width is the remainder of the row. – krische Apr 12 '12 at 21:16
  • like this screenshot from WebOS: http://developer.palm.com/content/api/images/palm/ui_summary/divider_alpha.jpg – krische Apr 12 '12 at 21:19
  • it looks like I can make the left line and text `float: left;` then make the right line `overflow: hidden;` like so http://jsfiddle.net/9syqG/5/ – krische Apr 12 '12 at 21:37

1 Answers1

1

If you have a defined color you can set as the background and there aren't any css browser considerations, this might help.

Updated - background color is flexible now.

http://jsfiddle.net/9syqG/6/

mikevoermans
  • 3,967
  • 22
  • 27