Forums

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

Home Forums CSS float confusion…

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #35234
    stevedeer
    Member

    hi all

    fairly new to this. I have a fiddle…

    http://jsfiddle.net/stevedeer/cYPyQ/

    why is my h3 element floated below the h1 and h2 elements?… as it is floated to the right I was expecting it to move up to line up with the h1 element

    #90939
    TheDoc
    Member

    For that to happen both your h1 and h2 element would also have to be floated (but to the left).

    #90951
    stevedeer
    Member

    doc… cheers… but then my h2 floats to the right of my h1, when it should remain underneith

    #90952
    TheDoc
    Member

    Yup.

    So you’d either need to absolutely position your h3 or add a wrapper around your h1 and h2 and float the wrapper.

    #90953
    TBRudy3
    Member






    Company Name Right Here


    Description




    this is floated right





    /* ===== CSS ===== */

    #topwrap {
    float:left;
    width: 100%;
    height: 80px;
    background-color: #C0C0C0;
    Padding: 12px;
    }
    .left{
    float:left;
    width:300px;
    }

    h1, h2, h3 {
    font-family:"Verdana";
    color: white;
    }

    h1 {
    width:300px;
    font-size: 1.4em;
    float:left;
    }

    h2 {
    width:300px;
    float:left;
    font-size: 1em;

    }

    .right{
    float:left;
    margin:0;
    padding:0;
    width:300px;
    }


    h3 {
    font-size: 1em;
    float: right;
    }

    #90954
    stevedeer
    Member

    much obliged gentlemen!

    #90955
    TBRudy3
    Member

    Although, I recommend positioning absolute in the header……A lot easier, and you will not have to worry about clearing any floating divs. follow me @TBRudy3, I usually post tricks, tuts and what not. . .

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