CODEWITHSUNDEEP
htmlcss
user5217533
user5217533

Reputation:

float element to right of div appears outside

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"><a href="/"><img src="mylogo.png" /></a></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?

Upvotes: 1

Views: 61

Answers (3)

G.L.P
G.L.P

Reputation: 7207

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

Upvotes: 0

Yandy_Viera
Yandy_Viera

Reputation: 4380

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"><a href="/"><img src=https://i.sstatic.net/gijdH.jpg?s=328&g=1" /></a></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"><a href="/"><img src=https://i.sstatic.net/gijdH.jpg?s=328&g=1" /></a></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{...}

Upvotes: 1

user4257136
user4257136

Reputation:

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 */
}

Upvotes: 0

Related Questions