CSS Fluid Title

Vote count:

0

I need to make a title fluid in a page template for a CMS I have built the code I have is below.

<div class="content-output-title-container" id="page-title">
    <h1 class="content-output-title">{page_name}</h1>
</div>

CSS:

.content-output-title-container {
    height: 50px;
    margin-top: 0!important;
    padding-top: 42px;
    z-index: 4!important;
    width: 100% !important;
    background: #FFF;
    display: inline-block;
}

.content-output-title {
    font-weight: 400;
    text-transform: uppercase;
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    position: relative;
    min-width: 280px;
    border-left-width: 20px;
    border-left-color: #00AFA9;
    border-left-style: solid;
    border-right-width: 20000px;
    border-right-color: #64405F;
    border-right-style: solid;
    display: inline-block;
}

As you can see I have a border on both edges which needs to persist for any length of title text.

The issue is that when the title text is something like

the border behaves and the title is full width in the container however if the title is something like

Is there a way in CSS that I can make the longer title flow and not wrap with the borders present?

asked 29 secs ago

Justin Erswell

195

CSS Fluid Title