CSS Aligning Text Within Divs

Question

I want to create a header with a few words aligned to the far left of the header div and a few words aligned to the far right. I initially did this by creating spans (.headerLeft and .headerRight) and adjusting the alignment for the portions I wanted aligned. However, this creates problems if I want a background-color for my header div. Is the best practice solution here to simply add a little inline CSS styling, or is there a better way?

My Code (example)

HTML

<div class="header">
 <span class="headerLeft">Welcome to .</span>
 <span class="headerRight"><a href="login.html">Login</a> | <a
 href ="register.html">Register</a></span>
</div>

CSS

.header {
 width:100%
 position:fixed;
 top:0;
 margin-top:0;
 background-color:red;
 text-color:#C14000;
}
.headerLeft {
 float:left;
 text-align:left;
}
.headerRight {
 float:right;
 text-align:right;
}

Answer 1

You need to clear the floats in order for the div to have actual height.

This can be achieved by using clearfix. What is a clearfix?

Answer 2

#header {
    overflow: hidden;
}

This code will fix your problem. The height of #header will automatically take the height from the tallest element inside #header.

Another way would be to manually set the height for #header.

You don't need to style sth inline :)

Answer 3

You need to set the overflow attribute for the header class to force it to wrap around the inner spans. see http://jsfiddle.net/PsychegoPro/rnDT8/