treehouse : what would you like to learn today?
Web Design Web Development iOS Development

css layout

  • I'm reworking a site to make it responsive and having a few issues. On 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.

  • 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;
    
  • 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).

  • 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?

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

  • @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.