CSS Div with Left and Right Text with a Margin and Vertically Aligned

Question

I am trying to create a div with left and right aligned text. The left text is a larger font that the right. I would like to have a margin (10px) to the left of the left text and to the right of the right text. What I am getting is:

+------------------------------+
|                         Right|
|Left                          |
+------------------------------+

Here is my HTML and CSS:

<div id='banner'>
  <p class='align-left banner-text-large'>Left</p>
  <p class='align-right banner-text-small'>Right</p>
</div>

#banner {
  position: fixed;
  top: 0px;
  height: 50px;
  width: 100%;
  background-color: #702f7b;
  clear: both;
}

.banner-text-large {
  color: #ffffff;
  font-family: 'arial';
  font-size: 18px;
  vertical-align: middle;
}

.banner-text-small {
  color: #ffffff;
  font-family: 'arial';
  font-size: 14px;
  vertical-align: middle;
}

.align-left {
  float: left;
}

.align-right {
  float: right;
}

What am I doing wrong?

Answer 1

To have the p elements vertically-centered within their parent, simply set line-height equal to the height of the parent element. To have them also 10px away from the left, and right, sides of their parent set the padding-left and padding-right on that parent element.

That said, I'd suggest the following approach:

#banner {
    /* above CSS unchanged */
    box-sizing: border-box; /* forces the width of the element
                               to include the padding and border widths */
    padding: 0 10px; /* sets the padding-top and padding-bottom to 0,
                        padding-left and padding-right to 10px */
}

#banner p {
    margin: 0; /* overrides the browser default-margin */
    padding: 0; /* overrides the browser default-padding */
    line-height: 50px; /* forces the text to be vertically centred */
}

JS Fiddle demo.