[RESOLVED] HR Vertically center next to text, width dynamic

Derokorian

Hi guys,

I'm trying to make a bit of text have an HR vertically aligned middle next to it, and have the HR's width be dynamic based on the size of the text. See attached image to get the idea.[ATTACH]4617[/ATTACH]

This is what I have to get that look:

<div style="padding-bottom: 10px">
    <div style="width:125px;display:inline">
        <span>My Latest Updates</span>
    </div>
    <div style="float:right;width:85%;padding: 5px 10px;"><hr></div>
</div>

However, when I change the text the hr stays the same size (obviously) and I can't figure out how to make it always say 25px away from the text. Any thoughts?

img.png

jeepin81

I personally would do something like the following and get rid of the <hr/> tag:

<html>
<head>
<body>
<style>
div{ 
  position:relative; 
  height:1px; 
  border-top:1px solid #CCCCCC; 
  text-align:left; 
}
span{ 
  position:relative; 
  top: -.7em; 
  background:white; 
  display:inline-block; 
  padding-right:15px;
}
</style>

<div>
<span>Test 1</span>
</div>

<br/>

<div>
<span>Test 2 Test 2 Test 2 Test 2</span>
</div>

</body>
</html>

Weedpacket

To start with, what you have now can be simplified somewhat:

<div style="padding-bottom: 10px">
    <span>My Latest Updates</span>
    <hr style="float:right;width:85%;margin: 5px 10px;">
</div>

From some of the bits around the edge, am I right in guessing that this is part of a form? If so, would <fieldset> and <legend> elements be appropriate?

<form>
<fieldset style="border:none; border-top:2px groove">
<legend>My Latest Updates</legend>
.....
</fieldset>
</form>

It would also have the semantic effect of indicating which part of the form "My Latest Updates" applies to.

Derokorian

This is only a part of a form in the sense that everything seems to be a form in vb.... but no its part of a social networking module we're building into our product.

jeepin81

There's a good chance I'm missing something but did you try the solution I offered? You can adjust the right-padding to suit your needs and wrap it in whatever class, id, wrapped you need.

Also, if you want a more simplified solution I would use an image in the background in place of your horizontal rule.

just following up.

I thought of the fieldset w/ a border-top only but that doesn't address the line to the left of your title.

johanafm

If you're going to use jeepin's solution, I recommend the following changes

<style>
div.variable-line{ 
	position:relative; 
	border-bottom:1px solid #CCCCCC; 
	text-align:left;
	height: 1em;
	margin: 0;
	padding: 0;
}
div.variable-line-text{ 
	position:relative; 
	top: -1em;
	margin-top: 1px;
	background: white; 
	display:inline-block; 
	padding-right:15px;
}
</style>

<div class="variable-line">
</div>
<div class="variable-line-text">Test 1</div>

<br/>

<div class="variable-line">
</div>
<div class="variable-line-text">Test 2 Test 2 Test 2 Test 2</div>

In short, keep the div creating the line at full height, its border at the bottom and the div containing the text outside and following the line element. That way, you can move the text up one full em (and move it down by one px to make it look better) without pushing the text above the block containing the line. It will be fully inside it, so that you do not screw up positioning against other elements.

Derokorian;11010275 wrote:
However, when I change the text the hr stays the same size (obviously) and I can't figure out how to make it always say 25px away from the text. Any thoughts?

As for your particular question, this is not possible to solve with CSS as far as I understand things. When you float something, you break it outside of the flow of content around it, which means that it no longer recognizes widths of the stuff around it so that it can fill out remaining space, or if you invert what things you float, the content around it does not recognize its width so that it can fill out the rest.

You can however solve this in javascript, taking the width of the containing element, space used by the text container and calculate the remaining space needed for the line.

<style>
div.text-line-container {
	width: 400px;
	line-height: 1.4em;
}
span.variable-line-text {
	font-size: 1em;
	padding-right: 1.25em;
	/*	If you add even 1px margin, the line will no longer fit
		unless you also calculate width of the margins for this element. */
	margin: 0;
}
div.variable-line {
	border-bottom: 1px solid #CCCCCC;
	height: 1em;
	float: right;
}
.clear-right {
	clear: right;
}
</style>

<div class="text-line-container">
	<div class="variable-line"></div>
	<span class="variable-line-text">
		Text
	</span><br class="clear-right">

<div class="variable-line"></div>
<span class="variable-line-text">
	Longer Text
</span><br class="clear-right">
</div>

<script>

var w = $('div.text-line-container').width();
$('span.variable-line-text').each(function(i, e) {
	/*	Take care when computing remaining space. outerWidth does include
		padding and border, but not margin.
	*/
	var remaining = w - $(e).outerWidth() - 1;
	$(e).prev('div.variable-line').css('width', remaining);
});
</script>

Derokorian

Sorry guys got absolutely swamped the past couple days just now coming back to fixing "minor" style issues (though most of them bother me a lot). Thanks so much for the solutions, johanafm's seem to work best with the classes and styles we already have in place, except that I used an hr instead of a div. Its great to get this out of the way without spending a long time on it. I just couldn't wrap my head around it for some reason, but the requirements document specifically calls for using HR so the div border bottom approach wasn't going to work.

Jeepin your approach did work mostly, except that it would break the requirements given by the chief architect, but I do appreciate the help none-the-less.

Weed the fieldset approach was pretty awesome, I have never used it before and the next form with multiple sections will use that. Thanks.