#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    4
    Rep Power
    0

    Horizontal alignment of text and image


    God help me, a programmer switching over to the dark side, trying to get creative. (A noob to CSS).

    I have this html:

    <div class="header">
    <a id="home" href="">Home</a>
    <img id="logo" src="../images/brain-fart-smiley-emoticon.gif" alt="Brain Fart">
    </div>

    This CSS:

    .header {
    border-bottom: 1px solid #C6EC8C;
    }

    #logo {
    float: right;
    }

    #home {
    vertical-align: bottom;
    }

    I have the home <a href> on bottom left-side container edge like I want. I would like the <img> horizontally aligned on the right-side container edge. For the life of me, I can't figure out how? What do I need to add - or change?

    Thanks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    66
    Rep Power
    6
    Unless you want other things wrapped around that image, I recommend getting rid of the float:right and go with setting the margins.

    margin-left will give it a push to the right.

    margin: top right bottom left

    margin: 10px 0 0 300px;

    Something like that.
    Hope that helps.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    4
    Rep Power
    0
    Originally Posted by etidd
    Unless you want other things wrapped around that image, I recommend getting rid of the float:right and go with setting the margins.

    margin-left will give it a push to the right.

    margin: top right bottom left

    margin: 10px 0 0 300px;

    Something like that.
    Hope that helps.
    Yes, indeed. margin-left: 70% is what I tried. I was trying to move it with em - but probably the margin: float was screwing that up.

    Thanks very much.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    66
    Rep Power
    6
    Good.

    Using a % is going to make the positioning different on different sized browsers. If your design is set up to be more elastic, then this will be fine. If your design is more static, mixing %'s with pixel units is going to create a layout issue.

    Throw me some reputation, will ya?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    4
    Rep Power
    0
    Originally Posted by etidd
    Good.

    Using a % is going to make the positioning different on different sized browsers. If your design is set up to be more elastic, then this will be fine. If your design is more static, mixing %'s with pixel units is going to create a layout issue.

    Throw me some reputation, will ya?
    Elastic is good.

    Threw you some reputation (had to figure out what that was).

IMN logo majestic logo threadwatch logo seochat tools logo