up vote 0 down vote favorite

![enter image description here][1]I want to make a horizontal line after my text.

Instead of hiding the content that goes out of the div (#line), it doen't display it at all. The #line div has to be bigger than the #textline div because I don't know the size of the text div.

Edit: Here is the Jfiddle http://jsfiddle.net/wakary/8tTzz/2/

Put #line {width: 100;} to see what I want to accomplish.

Edit: (what I want to acheve, the title changes): http://i.stack.imgur.com/4JSKb.jpg

share|improve this question
I don't think you can use "]]" as an ID. – Billy Moat Sep 17 '12 at 15:57
1  
You're not really using three! DIVs to draw a single line? The image also looks nothing like what you have in your fiddle – even when stripping the overflow: hidden;… – feeela Sep 17 '12 at 15:59
1  
@BillyMoat That's ll. Install a new font on your PC ;-) – feeela Sep 17 '12 at 15:59
@feeela - Doh!! – Billy Moat Sep 17 '12 at 16:00
It's ll (lowercase LL) – user1675769 Sep 17 '12 at 16:01
show 8 more comments

2 Answers

up vote 0 down vote accepted

Hi I have made some small changes to your code

#textline{
position: relative;
width: 400px;
height: 36px;
margin-left: 20px;
overflow: hidden;
}
#text{
position: absolute;
color: green;
height: 36px;
background:white;
padding-right:10px;
}
#line{   
position: absolute;
height: 10px;
width: 80%;  
border-bottom: 1px solid green;
}

And the HTML like this

<div id="textline">
    <div id="line"></div>
    <div id="text">Text</div>
</div>

So in this case you will have one div over the other, the line will cover all it´s container, and the text will hide some part of this line.

share|improve this answer
I can't use this method because I have a background image not just white background. – user1675769 Sep 17 '12 at 16:42
also, the line does not change size based on the length of the text in the header. – Derek Adair Sep 17 '12 at 17:00
So try to use the same image in the background of the text. – andres83 Sep 17 '12 at 17:05
That's my last resort solution. – user1675769 Sep 17 '12 at 17:07
up vote 0 down vote

Removing the width of the container element works.

Demo

share|improve this answer
I want the text and line to be in a fixed width container. The text to change length and the line to change length according to the text. – user1675769 Sep 17 '12 at 16:28

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.