tags:

views:

56

answers:

1
<html>

<head>
<title>Title</title>
<style type="text/css">

#container {
    position: relative;
}
#line {
    border-bottom: thin solid gray;
    display:inline-block;
    position:relative;
    bottom: 1ex;
    width:90%;
}
</style>
</head>

<body>
<div id="container">
    <span id="title">Title</span>
    <span id="line"></span>
</div>
</body>
</html>

How do i make that the width of span "line" to be equal with the width of "container" minus width of the span "title"?

Edit

The width of the "title" to be decided by the text inside the "title".

+1  A: 

The easy answer is to give #title a width. For example, if you assign #title a width of 10%, than your problem is over (as you've already assigned #line a width of 90%). The not so easy answer is to use JavaScript to calculate the widths.

Jason Leveille
What about if i use for "title" width=50px ? Isn't there a trick with css that will make "line" to fill the rest of the empty space?
Alqin