Creating a three-column CSS layout with the option to toggle one column

Question

Creating a three-column CSS layout with the option to toggle one column

I am attempting to design a 3-column layout in CSS with one column that can be toggled on and off. The diagram below illustrates the layout.

I want all three columns to be full height.

In red: A fixed-width column
In green: A toggleable menu
In dark green: The menu once toggled
In white: The main container that should occupy the remaining space

I have made an attempt using the following code, but it has not been successful:

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

Here is the corresponding 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;}

html css layout

Answer 1

Answer №1

Are you looking for something similar to this?

http://jsfiddle.net/Jnplw/

I've incorporated a jQuery script for a toggle effect – simply click on the green box.

In essence, when you define both float and width, elements should maintain a display: block property to fit seamlessly into the content.

Answer 2

Are you looking for something similar to this?

http://jsfiddle.net/Jnplw/

I've incorporated a jQuery script for a toggle effect – simply click on the green box.

In essence, when you define both float and width, elements should maintain a display: block property to fit seamlessly into the content.

Answer 3

Answer №2

Check out this working FIDDLE Demo

To create a page with full height, you'll need a wrapper:

<div id="wrapper">
    <!-- Your HTML elements here -->
</div>

This wrapper will take up the entire page:

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

Within the wrapper, you can place your desired elements like so:

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

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

It's important to note that the green element is a child of the lime element. When lime has the class collapsed, all data will be hidden except for the green one. Here's the CSS for this setup:

(CSS code provided in original text)

To toggle the visibility of the lime element, some JavaScript (using jQuery) is needed:

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

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

You can view the complete implementation in action in this FIDDLE Demo.

Answer 4

Check out this working FIDDLE Demo

To create a page with full height, you'll need a wrapper:

<div id="wrapper">
    <!-- Your HTML elements here -->
</div>

This wrapper will take up the entire page:

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

Within the wrapper, you can place your desired elements like so:

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

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

It's important to note that the green element is a child of the lime element. When lime has the class collapsed, all data will be hidden except for the green one. Here's the CSS for this setup:

(CSS code provided in original text)

To toggle the visibility of the lime element, some JavaScript (using jQuery) is needed:

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

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

You can view the complete implementation in action in this FIDDLE Demo.

Creating a three-column CSS layout with the option to toggle one column

Answer №1

Answer №2

Similar questions

Having trouble toggling the dropdown submenu feature in a Vuejs application?

Having trouble with Ajax Cross Domain functionality?

What's the best choice for ASP.NET: Using CSS or Themes?

The jQuery attr() method is universally compatible across platforms and stands independent

Tips for customizing the selected and hover color of ListItem in Material UI

Is it possible to adjust the dimensions of the number input spinner?

When adding my Angular web app to the home screen on iOS Safari, the icon appears as a screenshot instead of the specified apple-touch-icon

Problem with Loading Images in JSP

Maximizing page space with ReactJS and advanced CSS techniques

Confirmation of successful submission of an HTML form

Is there a way to remain on the current page in WordPress after submitting a contact form?

What steps should I take to ensure that this modal remains persistent?

A universal setting takes precedence over Vuetify divider colors

Fill in input field based on choice from the drop-down menu - JavaScript

Collection of numbers with decimal points

Eliminate odd white spacing within nested div elements in Chrome

When hovering over one div, both it and another div should be displayed simultaneously. The second div should continue to be displayed even when hovered over

Block with vertical text covering entire height

Using arrays to pass parameters in JavaScript

Splitting a string into individual parts using PHP