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.

Answer 2

It appears that you've not reset the default margin on the paragraph element

just add this to your css (and add the extra margins into the left and right aligned text):

p { margin: 0; }

here's a jsfiddle to help:

http://jsfiddle.net/benbroadley88/5C4Eb/

Edit: and your missing the ' as mentioned in one of the comments above.

Answer 3

Here you go:

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

body {
    margin: 0;
    padding: 0
    }

 #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;
  margin-left: 10px;
}

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

.align-left {
  float: left;
}

.align-right {
  float: right;
}

Answer 4

The margin of <p> comes from broswer's style sheet.
Override the margin of p, and set line-height to the same value for both.

http://jsfiddle.net/wJyv2/1/

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

.banner-text {
  margin: 15px 0;
  line-height: 20px;
  color: #ffffff;
  font-family: 'arial';
}

.banner-text-large {
  font-size: 18px;
}

.banner-text-small {
  font-size: 14px;  
}