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;
}

The `background-color` is fine if you take off `float: left;` from `.headerLeft`. BTW, you should use `color: red;` not `text-color: red;`. `text-color` does not exist. — uınbɐɥs, Jun 01 '12 at 22:24

score 3 · Accepted Answer · edited Jun 01 '12 at 18:46

3

#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 :)

edited Jun 01 '12 at 18:46

0b10011

18,397
4
65
86

answered Jun 01 '12 at 17:59

doptrois

1,560
11
10

score 2 · Answer 2 · answered Jun 01 '12 at 18:00

2

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/

answered Jun 01 '12 at 18:00

James

97
3

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

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?

edited May 23 '17 at 11:56

Community

1
1

answered Jun 01 '12 at 18:51

Madara's Ghost

172,118
50
264
308

CSS Aligning Text Within Divs

My Code (example)

HTML

CSS

3 Answers3