The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

Header Content positioning question

  • # June 20, 2009 at 12:45 pm


    Can anyone take a look at the css for my header content (#header-content) and tell me if there is a better and/or more easily update-able way to position the images inside that div?
    My noob-ness is causing me to second guess myself and I get the feeling that I’m doing the positioning the hard way and need to set my mind at ease about it.

    Here’s a link

    And here’s the part of the css I’m talking about:

    /* Header */
    img#header-photo {
    float: left;
    width: 350px;
    margin: 65px 0 65px 45px;
    border: 1px solid #fff;

    img#logo {
    float: right;
    margin: 200px 15px 0 0;

    Thanks in advance for your time!

    # June 20, 2009 at 3:27 pm

    I would throw away the #header-content div altogether, give the .header div (why a class? How many headers are you going to have on one page?) a specific height and width and make it position: relative and absolutely position the image and logo inside it, with the nav ul after the header div in the markup.
    I’ll save Rob another piece of shameless self-promotion :D and point you towards this article

    # June 20, 2009 at 9:00 pm

    Thanks for the input. I’ll give that article a thorough read…

    BTW, I completely see your point about the wrapping div. I think I just had it in there as a by-product of experimenting with positioning. Also, point taken re: id vs. class on the header div. :oops:

    Thanks again!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed