In the following code snippet, there is a top bar with a lengthy text:
<div class="topbar">
<div style="float:left;height:36px;line-height:36px;text-transform: none;">
long text....
</div>
</div>
Within the topbar class, the line below is used to create an underline:
border-bottom: 1px solid #b6b6b6;
Typically, everything works fine as the long text fits on one line. However, when the browser width is reduced, causing the text to wrap onto two lines, the underline remains in its original position.
The question then arises - how can the topbar expand in height when the long text spans two lines? Is there something missing from the topbar CSS styling?
Below is the current CSS style for the topbar:
font-size: 19px;
border-bottom: 1px solid #b6b6b6;
padding: 11px 0 7px 0;
color: #737171;
text-transform: none;
Any insights or solutions would be greatly appreciated. Thank you.