How do I organize this overflow layout?
I am having problems with some position and position of a div.
The layout I want:
I want the title to always appear in full and to the right. Subtitles should appear on the left, but with any overflow, so the length of the title always takes precedence.
I have the following code:
<html>
<head>
<style type="text/css">
.title {height: 25px; text-align:left; width: 300px; border:1px solid red;}
.subtitle {height: 20px; overflow:hidden; float:left; border: 1px solid blue;}
</style>
</head>
<body>
<div class="title">
Title number 1
<div class="subtitle">This is subtitle that is longer with even more text</div>
</div>
</body>
</html>
In a minute, if the subtitle is too long, it just hovers under it. Any ideas?
source to share
Good time to use text-overflow: ellipsis
.
http://jsfiddle.net/thirtydot/sxeu9/
HTML:
<div class="row">
<div class="title">Title number 1</div>
<div class="subtitle">This is subtitle that is longer with even more text</div>
</div>
CSS
.row {
width: 200px;
float: left;
border: 1px dashed #444;
padding: 3px;
}
.title {
float: right;
border: 1px solid #666;
}
.subtitle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #f0f;
}
source to share
Hi, maybe this is not a perfect solution, but it works ... it might be a good start.
I positioned the main title above the subtitle using absolute position and hid the subtitle text using the colored bakground in the main title.
<html>
<head>
<style type="text/css">
.title {
height: 25px;
width: 300px;
position: relative;
}
.maintitle
{
height: 25px;
border:1px solid red;
font-size: 21px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding-left: 10px; /* to give space to the left on the main title */
background-color: #ffffff; /* to hide the text under it. */
}
.subtitle {
height: 20px;
overflow:hidden;
border: 1px solid blue;
max-width: 290px; /* to make sure the sub-title dont fall on two line */
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="title">
<div class="maintitle">
Title number 1
</div>
<div class="subtitle">
This is subtitle that is longer with even more text
</div>
</div>
</body>
</html>
source to share
Here is an attempt that seems to work: http://jsfiddle.net/3nCuJ/ (explained below)
In particular, I made the float title correct and not a subtitle floating to the left. This will ensure that the entire title is visible on top of the subtitles. Then, to make the subtitle clip correctly, I added an inner div to contain the subtitle text.
If you want subtitles to stop at word boundaries, use this instead: http://jsfiddle.net/3nCuJ/1/
HTML:
<div class="outer">
<div class="title">Title number 1</div>
<div class="subtitle"><div class="subtitle_inner">This is subtitle that is longer with even more text</div></div>
</div>
CSS
.outer {
height: 25px;
width: 300px;
}
.title {
height: 23px;
float: right;
border:1px solid red;
}
.subtitle {
height: 23px;
overflow:hidden;
border: 1px solid blue;
}
.subtitle_inner {
width: 300px;
}
source to share