Position text at left and right end of Div - html

Question

I'm very new to web design and I have an issue with a header div at the top of my web page. I want to display the User's Name that's logged in on the left, and the date on the right end. Here is the CSS and HTML Code:
.introHeader {
background: #494949;
width: 100%;
padding-left: 12px;
padding-right: 12px;
border-bottom: 1px solid #000000;
border-radius: 0;
position: relative;
min-height: 30px;
border: 1px solid transparent;
font-weight: Bold;
color: rgb(255, 255, 255);
font-size: 18px;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
}
.user {
float: left;
font-size: 15px;
}
.date {
float: right;
font-size: 15px;
text-align: right;
}
<div class="headerIntro">
<div id='user'>User</div>
<div id='date'>Date</div>
</div>
However, this is what my code yields:
Any suggestions on how to get the text positioned correctly?

Answer 1

Try this css
.headerIntro {
/* next line because using padding and border */
box-sizing: border-box;
width: 100%;
min-height: 30px;
padding-left: 12px;
padding-right: 12px;
border: 1px solid transparent;
border-bottom: 1px solid #000000;
border-radius: 0;
position: relative;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: rgb(255, 255, 255);
background: #494949;
}
#user {
width: 50%;
float: left;
font-size: 15px;
}
#date {
width: 50%;
float: right;
font-size: 15px;
text-align: right;
}