div with float right breaking children

Question

I have been looking everywhere for help on this issue with Css layout width I have been running into.

Whenever I float a div to the right its width won't automatically adjust to the total width of its children. I have observed this effect on all common browsers (Firefox, Chrome and IE11/Edge). What happens is that the last child will just be displayed bellow all the others which is what I do not want.

Here is the css and html I have been using.

https://jsfiddle.net/xqpf9s95/2/

    *

<div id="header-container">
        <div id="header-top-container">

          <div id="header-logo">
            <a href="/GlobalImagens/pages/imagens.xhtml?categoria=ultima-hora">
              <img src="../resources/images/logo_globalimagens.jpg" alt="Global Imagens"></a>
          </div>

          <div class="header-top-right-corner">
            <form id="language" name="language" method="post" action="/GlobalImagens/pages/imagens.xhtml" enctype="application/x-www-form-urlencoded">
              <input name="language" value="language" type="hidden">

              <div id="newsletter" class="newsletter">
                <a href="http://72.e-goi.com/w/Te1LetVmefgyM9g90LOh" target="_blank" style="font-size: 10px;">Subscrever Newsletter</a>
              </div>

              <div style="float: right; padding-left: 6%;">
                <script type="text/javascript" src="/GlobalImagens/javax.faces.resource/jsf.js.xhtml?ln=javax.faces&amp;stage=Development"></script>
                <a href="#" style="text-decoration:none; " onclick="mojarra.jsfcljs(document.getElementById('language'),{'language:j_idt31':'language:j_idt31','localeCode':'en'},'');return false">
                  <img src="../resources/images/flag_uk.jpg" border="0"></a>
              </div>

              <div style="float: right;">
                <a href="#" style="text-decoration:none;" onclick="mojarra.jsfcljs(document.getElementById('language'),{'language:j_idt35':'language:j_idt35','localeCode':'pt'},'');return false">
                  <img src="../resources/images/flag_pt.jpg" border="0"></a>
              </div>
              <input name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="215900126811062761:3093351618596041247" autocomplete="off" type="hidden">
            </form>
          </div>

          <div id="admin-container">

            <div>
              <span class="admin-menu1" style="padding-left: 1.5%;"><a href="/GlobalImagens/pages/entrar.xhtml" title="Iniciar Sessão">Iniciar Sessão</a>
                        </span>
              <span class="dotted-separator"></span>
              <span style="padding-left: 1.5%;"><a href="/GlobalImagens/pages/registo.xhtml" title="Registo">Registo</a>
                        </span>

              <span class="admin-menu3"><a href="/GlobalImagens/pages/entrar.xhtml">
                            <img src="../resources/images/bt_minhaconta.jpg" title="A Minha conta" alt="A Minha conta"></a>
                    </span>
              <span class="dotted-separator"></span>
              <span class="admin-menu4"><a href="/GlobalImagens/pages/entrar.xhtml">
                            <img src="../resources/images/bt_carrinho.jpg" title="Meu carrinho" alt="Meu carrinho"></a>
                    </span>
            </div>
            <div>

              <div align="right">
                <span style="color: #83266f; padding-right: 5px;">Não pode adquirir imagens</span><a href="/GlobalImagens/pages/consumos.xhtml" style="color:#83266f;" title="detalhes">(detalhes)</a>
              </div>

            </div>
          </div>

        </div>
    /*tables header*/
.admin-menu1 {
  padding-right: 1.5%;
}
.dotted-separator {
  border: none;
  border-left: 1px dotted #83256f;
  color: #fff;
  /*   background-color:#dadada;
  height:17px;
  width:0%;
  margin: 0%; */
}
.admin-menu2 {
  padding-left: 10px;
  background: url(../images/background_dot.jpg) no-repeat right;
}
.admin-menu-logged-in-3 {
  padding-left: 1.5%;
}
.admin-menu3 {
  /* width: 75px; */
}
.admin-menu4 {
  /*    width: 28px; */
}
/*******************************HEADER*******************************/
#header-container {
  /* height: 180px; */
  /* float: left; */
}
#header-top-container {
  /*    width: 983px; */
  /* height: 100px; */
  /* float: left; */
}
#header-logo {
  padding-top: 1%;
  float: left;
}
#header-logo img {
  border: none;
  border-style: none;
}
.newsletter {
  float: left;
  padding-top: 1%;
}
.header-top-right-corner {
  float: right;
  padding-top: 1%;
  width: 11%;
}
#admin-container {
  padding-top: 1%;
  font-size: 10px;
  clear: right;
  float: right;
  box-sizing: border-box;
}
#admin-container a {
  text-decoration: none;
  color: #493641;
}
#admin-container a:hover {
  text-decoration: underline;
}

*

And my issue is with the div "#admin-container".

How do I fix this so as to make that div auto adjust to the correct width and display without breaking its children elements?

Cheers and thank you.

EDIT: I have editted the code as asked by @Dzijeus. As I have commented, the images don't matter for the issue. My issue is with why the width won't auto adjust on the '#admin-container' to fit all its children.

Answer 1

Thanks for updating the code, it was better, but still far from a minimum verifiable example. A minimum example is when you strip as much as you can from the code while still reproducing the problem.

In your case, if you had done the exercise, you would probably have come to something like this:

<div id="admin-container">
      <span class="admin-menu1">Iniciar Sessão</span>
      <span>Registo</span>
      <span>A Minha conta</span>
      <span>Meu carrinho</span>
</div>

.admin-menu1 {
  padding-right: 1.5%;
}

#admin-container {
  clear: right;
  float: right;
}

And you would immediately have seen the interest of doing this, AND solved the problem. Because from here, it is easy to notice that the problem is coming from using a relative padding. Switch to for example padding-right: 2px, and the display is now as you expected it.

As a general rule, padding and margin does not apply to inline elements such as span. To apply padding or margin you should use display: block or display: inline-block