Treehouse: Grow your CSS skills. Land your dream job.

css layout

  • # October 1, 2012 at 2:14 pm

    I’m reworking a site to make it responsive and having a few issues. On [this page]( “this page”), the nested lists below the image slider are not displaying correctly – no matter how many items I put in the last one always jumps down to the next line. This happens if I have 2 items in the list or 6. Ideally I will have 4 items and they should all be on the same line.

    And on [this page]( “”) the #products div is not being centred as the window resizes. I’m not sure what is going wrong – any suggestions? Thanks.

    # October 1, 2012 at 2:24 pm

    Using Firebug, I gave the .markets class style on your stylesheet a width and it put all 4 on the same line.

    Your #productsWrap style doesn’t seem to exist on the stylesheet. Make it and add:

    text-align: center;

    # October 1, 2012 at 2:30 pm

    Fof the first issue: give the first-level LI’s in the UL “marketName” a width in pixels, not in percentages (currently 2%, and 1% for the last child).

    # October 1, 2012 at 4:43 pm

    Thanks for the replies.

    @pmac627 – what width did you set .markets to? when I set it to 100%, it put all four list items on the same line, but the full list was not centered.

    @Senff – the percentages are set for margin-right. If I give them a fixed pixel width, then will they re-size as the window resizes?

    # October 1, 2012 at 4:57 pm

    @margaux : sorry, that’s what I meant. Change the right margins from percentages to pixels and I believe that should do the trick.

    # October 1, 2012 at 7:27 pm

    @margaux – I just picked 600px because I knew it was large enough. Preferably, you would want to use a width that very closely fit what you wanted. Anything larger might keep you off center.

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

You must be logged in to reply to this topic.