I am facing a design challenge where I need to align a header with content in a different column.
The header's length can vary, so I need to figure out how to align the border-bottom consistently.
(The code snippet below is just for illustration purposes)
<div class="container">
<div class="header-container">
<h1>Short title</h1>
</div>
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
.header-container
{
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
float: right;
border-bottom: 1px solid #bbb;
}
For better understanding, please visit
When dealing with a short title, the first line should be left blank. I am exploring CSS solutions for this alignment issue. One approach is to count the characters and add a margin-top, but this is not foolproof.
EDIT: The main challenge lies in aligning the header with content in a different container. Therefore, the revised HTML Markup and CSS should look more like this...
<div class="container">
<div class="span4">
<div class="header-container">
<h1>Short title</h1>
</div>
</div>
<div class="span8">
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
</div>
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
}
.span4
{
width:60%;
float: left;
}
.span8
{
width:40%;
float: left;
}