Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Float: left seems doesn't work

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #151211
    tirengarfio
    Participant

    Hi,

    I have this site. Since I have float: left in “Instalacion de canalon en Madrid”, I expected “2 años” be on the right of “Instalacion de canalon en Madrid” but no, anyone knows why?

    .logo-h1 {
      float: left;
      .logo {
        width: 324px;
        height: 57px;
        a {
          width: 324px;
          height: 57px;
          display: block;
        }
      }
      h1 {
        font-size: 17px;
        font-family: Verdana, Verdana, Geneva, sans-serif;
        width: 491px;
        margin-left: 20px;
        color: #BC2758;
        margin-top: 6px;
      }
    }
    .garantia {
      margin: 9px 24px 0 0;
      width: 145px;
      height: 91px;
    }
    

    It seems that to solve it I should add float: left to “2 años”, but float: left is working here ok: http://codepen.io/anon/pen/wFklj so what is the difference between both codes??

    #151213
    Edgarr
    Participant

    Hi @tirengarfio,

    The float is working, but it is not working the way you are expecting. When you add a float left to the div.logo-h1 the content of the div.garantia is the one being pushed, but the origin of the div is not pushed to the left. Please see this screenshot, I removed the width of your div.garantia and added some content to show my point:

    Screenshot http://cl.ly/image/2t0M35213d0z

    Solution

    • Add a left margin of 520px to the div.garantia, something like this:

    body header .garantia {
    height: 91px;
    margin: 9px 24px 0 520px;
    width: 145px;
    }

    #151258
    tirengarfio
    Participant

    Thanks guys, but my real question as I said in my first post is: what is the difference between both codes??

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.