Question

I’m trying to get 2 lines of text on the same row and one to be on the left and the other on the right.

CSS:

.topbar {
    background-image:url(images/bar_bg.png);
    height:62px;
}

.topbar span{
    font-family:Arial;
    font-weight:bold;
    font-size:15px;
    color:#494963;
    margin: 0;
    padding-left:280px;
    padding-top:15px;
}

.topbar span.left{
    font-family:Arial;
    font-size:15px;
    color:#494963;
    margin: 0;
    padding-right:380px;
    padding-top:15px;
}

HTML:

<div class="topbar">
    <span class="left">Contact Us or Come see us at our Branch</span>
    <span>11 HIGH  STREET, TOWN CENTER, Bristol, BA140IO </span>
</div>

Answer 1

You may have to set the span css to:

display: inline-block !important;

I’ve had issues where spans inherit the block display from the parent div or similar issues where an included css file has changed the span display type default.

By setting to inline-block the spans should display as expected without using floats. Personally I try to avoid floats when at all possible.

Here is a good example of how the layout is suppose to work:
div and span: display = ‘block’, ‘inline’, or ‘inline-block’ ?