3 or 2 column layout depends on actual content

Question

I have to build almost standard 3 columns layout

-----header-----
-s1-content-s2--
-----footer-----

Where sidebar1 and 2 has width:25% and content box has 50%. And it working perfect.

But the difference is in sidebar1. On some subpages there is absolutely no content for it. I set css for sidebar1 to max-width:25%; and when no content appears div has 0px x 0px. So almost done.

The final effect is to stretch content div to 75% when sidebar1 is empty.

Is it possible to do this without ugly css hacks or using JS? I checked many solutions and most are not working correctly.

Answer 1

This handles optional content on the left or right.

jsFiddle

HTML

<header></header>

<div id="wrapper">
    <div id="left-sidebar">
        Optional Content
    </div>

    <div id="content">
        <p>To sailors, oaths are household words; they will swear in the trance of the calm, and in the teeth of the tempest; they will imprecate curses from the topsail-yard-arms, when most they teeter over to a seething sea; but in all my voyagings, seldom have I heard a common oath when God's burning finger has been laid on the ship; when His "Mene, Mene, Tekel Upharsin" has been woven into the shrouds and the cordage.</p>
    </div>

    <div id="right-sidebar">
        Optional Content
    </div>
</div>

<footer></footer>

CSS

#wrapper {
    display: table;
}

#left-sidebar, #content, #right-sidebar {
    display: table-cell;
    vertical-align: top;
}

header, footer {
    background: pink;
    width: 100%;
    height: 2em;
}

#content {
}

#left-sidebar {
    background: lime;
    max-width: 25%;
}

#right-sidebar {
    background: red;
    max-width: 25%;
}

Answer 2

You have to use either floats, or display: table, I prefer using the latter, but to each their own.

<div id="wrapper">
    <div class="sidebar-one">
        some (or no) content
    </div>
    <div class="content">
        main content
    </div>
    <div class="sidebar-two">
        sidebar two
    </div>
</div>

#wrapper { display: table; }
#wrapper>div { display: table-cell; vertical-align: top; }
#wrapper .sidebar-one { max-width: 25%; }
#wrapper .sidebar-two { width: 25%; }