Grow your CSS skills. Land your dream job.

2 column layout question

  • # September 21, 2009 at 12:22 am

    Hi,

    Does anyone know how to make a 2 column layout flexible where if the 2nd column doesn’t have any content, the first extends full width? I could of course set a class on the first column like "full_width" and assign it a different width, but I was hoping I could solve this without the use of a class.

    Cheers

    Andrew

    # September 21, 2009 at 8:57 am

    Great question. I’d probably approach it with jQuery…

    Right sidebar = fixed width, float right.

    Left content area = float left, no width. (use an inside div if you need to force width on the content area)

    Code:
    var test = $(“#sidebar”).html();

    if (test = “”) {
    $(“#sidebar”).remove();
    }

    Although… now that I think about it more, if the sidebar doesn’t have any content anyway, it might not need to be removed since it’s height will collapse to zero (assuming it doesn’t have any padding).

    With the sidebar gone or collapsed, the left content area should theoretically expand to full width. If there is problems there, you could…

    Code:
    var test = $(“#sidebar”).html();

    if (test = “”) {
    $(“#sidebar”).remove();
    $(“#content”).css({ “width”: “100%”, “float”: “none)
    }

    # September 21, 2009 at 9:26 pm

    cheers, I’ve really got to start learning jQuery..

    # September 21, 2009 at 11:40 pm

    yes, jQuery is very powerful, and mean while, it is quite light weight

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".