float element to right of div appears outside - html

Question

Well, I'm back to doing front-end stuff -- which is really not my forté -- and I'm stumped.
I have a div with a logo, and I need to put some text in-line with it, vertically centered within the div. Every time I try to float the element right, it seems to end up outside of the div (somehow?).
Relevant HTML:
<div id="wrapper-header">
<div id="wrapper-nav-header">
<div id="header-logo">
<span id="header-logo-span"><img src="mylogo.png" /></span>
<span id="header-customer-name">Customer Name</span>
</div>
</div>
...
</div>
Relevant CSS:
#wrapper-header {
background-color: #fff;
position: fixed;
z-index: 999;
width: 100%;
padding: 0;
white-space: nowrap;
font-size: 13px;
line-height: 1
}
#wrapper-header #header-logo {
margin-left: 20px;
padding: 10px 0;
}
#wrapper-header #header-logo img {
max-height: 40px;
vertical-align: middle;
}
#wrapper-header #header-customer-name {
vertical-align: middle;
}
What do I need to do to get this header-customer-name element to float right?

Answer 1

You can try using flex box:
html, body{
margin: 0;
padding: 0;
}
#wrapper-header {
background-color: #fff;
position: fixed;
z-index: 999;
width: 100%;
padding: 0;
white-space: nowrap;
font-size: 13px;
line-height: 1
}
#header-logo {
margin-left: 20px;
padding: 10px 0;
display: flex;
align-items: center;
}
#header-logo img {
max-height: 40px;
vertical-align: middle;
}
#header-customer-name {
flex-grow: 1;
text-align: right;
}
<div id="wrapper-header">
<div id="wrapper-nav-header">
<div id="header-logo">
<span id="header-logo-span"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></span>
<span id="header-customer-name">Customer Name</span>
</div>
</div>
</div>
or you can calculate an appropriate padding to your header-customer-name like this:
html, body{
margin: 0;
padding: 0;
}
#wrapper-header {
background-color: #fff;
position: fixed;
z-index: 999;
width: 100%;
padding: 0;
white-space: nowrap;
font-size: 13px;
line-height: 1
}
#header-logo {
margin-left: 20px;
padding: 10px 0;
}
#header-logo img {
max-height: 40px;
vertical-align: middle;
}
#header-customer-name {
float: right;
padding: 12px 0; /*you can change for a more precise value*/
}
<div id="wrapper-header">
<div id="wrapper-nav-header">
<div id="header-logo">
<span id="header-logo-span"><img src=http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" /></span>
<span id="header-customer-name">Customer Name</span>
</div>
</div>
</div>
Anyway if you're referring that the header-customer-name is outing on the right of the #wrapper-header that is probably because it has position: fixed and width: 100%, that's why I add the style:
html, body{
margin: 0;
padding: 0;
}
Check my answer here to better understanding White Space Appears Right of Browser Window When at Full Screen
This has no relation with the question but can help you
Don’t Overqualify
As a general rule, don’t supply more information than is necessary.
// bad
ul#someid {..}
.menu#otherid{..}
#id1 #id2{...}
// good
#someid {..}
#otherid {..}
#id2{...}

Answer 2

Try in fiddle
Change style to this way..
#wrapper-header #header-customer-name {
vertical-align: middle;
float: right;
padding-top: 15px; /*value suits to your logo */
}

Answer 3

Do you have CSS reset code in CSS files which is linked with this page. After the is below css reset added, the problem was solved. Demo
html, body {
margin:0;
padding:0;
}