CODEWITHSUNDEEP
htmlcsslayout
Manitoba
Manitoba

Reputation: 8702

Three columns css layout + Togglable one

I'm trying to create a 3 columns layout in css with a togglable one. The following scheme should explain it better than words. enter image description here

I want the 3 columns be full height.

I've tried to do it with the following code but without success:

<div id="header"></div>
<div id="inline_container">
    <div id="left_menu"></div>
    <div id="toggle_menu"></div>
    <div id="main_container"></div>
</div>

And with this css code:

* {margin: 0; padding: 0;}
.body {height: 100%; width: 100%;}
#header {height: 70px; width: 100%;}
#inline_container {height: 95%; width: 100%;}
#left_menu {height: 100%; width: 80px; display: inline-block; float: left;}
#toggle_menu {height: 100%; width: 150px; display: inline-block; float: left;}
#main_container {height: 100%; width: 100%; display: inline-block; float: left;}

Upvotes: 0

Views: 113

Answers (2)

user1823761
user1823761

Reputation:

Working FIDDLE Demo

For creating full height page, you need a wrapper:

<div id="wrapper">
    <!-- MARKUP -->
</div>

That will fill the whole page:

#wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Inside our wrapper, we create our wanted elements:

<div id="wrapper">
    <div id="red"></div>

    <div id="lime">
        <div id="green"></div>
        <span class="close">[X]</span>
    </div>
    <div id="white">
        TEXT
    </div>
</div>

Note that the green element is a child of lime element. If lime get class collapsed, all data will be hidden and the green one will be display. Here is the CSS:

#wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#red {
    float: left;
    width: 200px;
    height: 100%;
    background: red;
}

#green {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: green;
    display: none;
    cursor: pointer;
}

#lime .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: pink;
    cursor: pointer;
}

#white {
    height: 100%;
    background: gray;
}

#lime {
    position: relative;
    float: left;
    width: 200px;
    height: 100%;
    background: lime;
    transition: width 0.5s;
}

#lime.collapsed {
    width: 30px;
}

#lime.collapsed * {
    display: none;
}

#lime.collapsed #green {
    display: block;
}

And for closing and opening the lime element, we need some JS (I used jQuery):

$(function () {
    $('#lime .close').on('click', function () {
        $('#lime').addClass('collapsed');
    });

    $('#green').on('click', function () {
        $('#lime').removeClass('collapsed');
    });
});

You can see the final FIDDLE Demo.

Upvotes: 2

kamil
kamil

Reputation: 3522

Did you want something like this?

http://jsfiddle.net/Kcfde/

I've added jQuery script to show toggle effect, just click the green div.

Basically, when you set float and width, elements should remain with display: block, as they'll fit in into content.

Upvotes: 5

Related Questions