Grow your CSS skills. Land your dream job.

This Should Be Simple, But I Can’t Figure it Out!

  • # September 20, 2011 at 10:02 pm

    I’m absolutely positioning my sidebar so it will match the height of #post_content… aka my posts.

    This works on virtually every page except when the post content is shorter than the sidebar, example:

    http://themeforward.com/demo2/2011/07/08/link/

    (sidebar content gets cut off)

    I realize if I remove overflow:hidden from #container I will see the rest of the sidebar… but this will also prevent the divs from matching height and hide the border and background color of the sidebar. Adding overflow:hidden to the sidebar itself hides the sidebar when on post pages.

    I know there must be a simple way to fix this with CSS (and possibly some other div) but I have been brain-drained on this issue now for two days. I’ve tried jQuery, but I know CSS can do it (possibly with another div?). What I need is simple: to display all the sidebar content and match the column heights at the same time.

    #container {
    width: 1126px;
    clear: both;
    position:relative;
    overflow:hidden;
    margin:35px auto
    }
    #sidebar {
    display:block;
    float: right;
    width: 410px;
    position:absolute;
    border-left:1px solid #000;
    background:#AAA;
    top:0;
    right:0;
    bottom:0
    }
    # September 21, 2011 at 2:03 am

    I think the problem is that you are positioning it absolutely. You should be able to just position them with floats and then when you clear them they lined up for me. Something like this:

    #post_content {
    display: block;
    float: left;
    width: 600px;
    }

    #sidebar {
    display: block;
    float: right;
    width: 410px;
    position: relative;
    overflow: hidden;
    border-left: 1px solid black;
    background: #AAA;
    }
    # September 21, 2011 at 9:06 am

    Thanks for the response Josh. Actually, I need their heights to match so the sidebar needs to be positioned absolutely to achieve this with CSS. I need to find a way to make the sidebar content still expand to show all content even while using overflow:hidden on #container.

    # September 21, 2011 at 9:16 am

    why do you need the heights to match? Josh is right, remove the AP (you can also remove the display: block; )

    # September 21, 2011 at 9:38 am

    I’m building a WordPress theme with options including switching the position of the sidebar. I want to be able to have the border on the sidebar expand to the height of the sidebar/post content (whichever is taller) without using the trick of just adding a background image to the container.

    # September 21, 2011 at 11:53 am

    how about placing a border on both the content (right side) and sidebar (left side) and pull the sidebar over 1px to the left so that the borders overlap. Then it doesn’t matter which is longer.

    # September 21, 2011 at 3:16 pm

    For future reference (and Google searchers) the solution can be found here: http://www.alistapart.com/articles/holygrail/

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

You must be logged in to reply to this topic.

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