Lining up an image with a title

1 Views

I have this site header I’m working on but I can’t get the logo and the site title to line up horizontally. I’m relatively new to CSS so would appreciate any hand-holding anyone can offer please 😉

The logo image is styled with:

Read More
.logo {
    float:left;
}

Whereas the h1.site-title and h2.site-description text is styled thus: 

 h1.site-title, h2.site-description { 
    position:relative;
    margin-left: 130px; !important
 }

I’m pretty sure I need to make another DIV and can’t get the positioning right so the logo is at the left, then immediately next to it the site title/description.

Post Views: 1

Related posts

Leave a Reply

2 comments

  2. There are a couple of things that I would recommend changing:

    1. In your HTML, you have logo set to an ID, so in your CSS it should use a # instead of a period.
    2. You do not need to tag qualify your classes in your CSS, meaning the h1 and h2 are not needed, just .site-title and .site-description should work.
    3. Avoid using !important whenever possible. It makes your code very hard to adjust later.
    4. instead of working with .site-title and .site-description work with their wrapping container, .home-link. Float both it and #logo left.
    5. If you want them to line up side by side, you will have to change the width of home-link to something smaller than 100%.
    6. remove the margin-left.

    so your CSS would look like this:

    #logo { float: left; }
.home-link { float: left; width: 75%; }