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

Make a Dynamic Sidebar

  • # September 9, 2011 at 9:18 am

    It’s my blog. You can see the sidebar in the right.
    I want to make that dynamic. That mean’s when the browser width become smaller that should go to the bottom of the content. How I can do that?

    See this picture to understand my purpose.

    # September 9, 2011 at 9:35 am

    You need to use media queries and remove the float:right from the sidebar.

    # September 9, 2011 at 11:03 am

    I can remove float:right, but how to use media queries? (Please let me know without external links)

    # September 9, 2011 at 11:16 am

    I suggest you look at some of the information here on CSS Tricks (Snippets for one) or Google it for yourself.

    # September 9, 2011 at 12:39 pm

    (Please let me know without external links)
    lol, c’mon @farzadina! There are tonnes of tutorials out there just waiting for you to read them.

    # September 9, 2011 at 12:58 pm

    Oh, Thanks! That’s what I wont! I found a useful link in CSS-Tricks. :)

    # September 10, 2011 at 11:41 am

    After many hours working, now I can say my blog is almost right for all platforms!

    But why almost? Because there’s a small problem that I couldn’t make it correct and I’m here to ask you to help me. That’s comments section.

    Please open THIS link. Make the browser width smaller. You will see many changes and the content will be correct. But Comments are not.
    I want you to show me the reasons to make that correct. Thanks.

    # September 11, 2011 at 1:49 am

    .commentlist has a a fixed width; maybe keep the value, but change it from width to max-width and see if that helps any?

    # September 11, 2011 at 4:28 am

    Where is that? (In which line)
    Is “.comment list .vacrd, comment list. children…” your purpose?
    If yes, I changed “width:100%” to “max-width:100%”, but that doesn’t helped.
    Any other solutions please.

    # September 12, 2011 at 10:00 am

    Any body help please!

    # September 12, 2011 at 11:45 am


    .commentlist li
    .commentlist li div

    all have fixed widths! replace those with max-width. maybe there’s more… so you should get chrome or opera, and become friends with “inspect element” (right click any element to see its CSS and why it has it)… and use that to find the things keeping the page from resizing properly, and change the stylesheet accordingly.

    # September 12, 2011 at 1:48 pm

    Thanks, I have Firebug plugin for FF. That’s so great.
    I will do that and if the problem doesn’t solved, I will let you know.
    Thanks again Johann!

    # September 12, 2011 at 1:58 pm

    I changed that elements, but there is a problem. Please check HERE to understand my problem.

    How can I solve it?

    # September 13, 2011 at 5:51 am

    When I changed the “.commentlist li div”, width to max-width, the comments become incorrect. SEE HERE PLEASE.

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

You must be logged in to reply to this topic.