My icon not floating right

Question

IMAGE:icon not floating to right and its meant to be perfect circle but its cut

I am trying to push the icon to the right of the header but all to no avail.This is the html:

 <body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
        <div class="mdl-layout--fixed-header mdl-layout__header-row">
        </div>
        <div class="mdl-layout--fixed-header mdl-layout--fixed-header mdl-layout__header-row">
          <h2>example.com</h2><button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style='float:right' id="account">
              <i class="material-icons md-36 orange600">account_circle</i></button>
        </div>
        <div class="mdl-layout--fixed-header mdl-layout__header-row">
        </div> 
        <div class="mdl-layout__header-row portfolio-navigation-row">
          <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
       {% block header %}

           {% endblock %}          
          </nav>

          </div>

      </header>

with css been:

.mdl-demo .mdl-layout__header-row {
  padding-left:10px;
  height:30px;
}
.material-icons.md-36 { 
  font-size: 36px;
  float:right;
}
.material-icons.orange600 { color: #ff4081;
  float:right;
 }

please add code to fiddle... – Nehemiah Aug 05 '16 at 09:49 — Nehemiah, Aug 05 '16 at 09:49

score 1 · Answer 1 · answered Aug 05 '16 at 09:50

It looks okay here: https://jsfiddle.net/L22ba1vs/

By the way your code you provided is incomplete, I added back the closing div and closing body tags that were apparently missing.

 <body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
    <div class="mdl-layout--fixed-header mdl-layout__header-row">
    </div>
    <div class="mdl-layout--fixed-header mdl-layout--fixed-header mdl-layout__header-row">
      <h2>example.com</h2><button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style='float:right' id="account">
          <i class="material-icons md-36 orange600">account_circle</i></button>
    </div>
    <div class="mdl-layout--fixed-header mdl-layout__header-row">
    </div> 
    <div class="mdl-layout__header-row portfolio-navigation-row">
      <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
   {% block header %}

       {% endblock %}          
      </nav>

      </div>

  </header>
  </div>
  </body>

My icon not floating right

1 Answers1