How about creating a responsive layout using only CSS3 for dynamic width adjustments?

Question

How about creating a responsive layout using only CSS3 for dynamic width adjustments?

I'm struggling to solve a design challenge involving three columns: a navbar (dark gray), main content (dark red), and sidebar (dark green). The navbar should be expandable and collapsible, while the sidebar should slide in and out. My goal is to make this layout responsive by adjusting the size of the main content area when either or both the navbar and sidebar are expanded. My current approach involves using calc(100% - navbar width - sidebar width) to determine the width of the main content, but this solution feels verbose when checking if the sidebar, navbar, or both are expanded.

Here's an illustration showing how the main content shrinks:

https://i.sstatic.net/MSIHN.png

I've considered using flexbox for this layout, but I haven't been able to figure it out yet.

Here's an example markup:

<nav> </nav>
<main> </main>
<aside> </aside>

Note: The nav and aside elements need to be 100% height of the page and fixed in place.

html css flexbox

Answer 1

Answer №1

If you want to achieve this layout, consider using the flex-box approach. Here is a basic example: http://codepen.io/anon/pen/pgVVJb

Feel free to experiment with changing the classes to see how it impacts the layout. Note that I am utilizing classes to adjust column widths, but you could also accomplish this using JavaScript or static CSS in a similar manner.

Here's the code snippet:

<div class="container">
  <div class="small">Nav</div>
  <div>Content</div>
  <div class="medium">Sidebar</div>
</div>

html, body, div {
  height: 100%;  
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
}

.container div {
  flex: 1;
  border: 1px solid #ccc;
  background: gray;
}

.small {
  max-width: 50px;
}

.medium {
  max-width: 150px;
}

Answer 2

If you want to achieve this layout, consider using the flex-box approach. Here is a basic example: http://codepen.io/anon/pen/pgVVJb

Feel free to experiment with changing the classes to see how it impacts the layout. Note that I am utilizing classes to adjust column widths, but you could also accomplish this using JavaScript or static CSS in a similar manner.

Here's the code snippet:

<div class="container">
  <div class="small">Nav</div>
  <div>Content</div>
  <div class="medium">Sidebar</div>
</div>

html, body, div {
  height: 100%;  
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
}

.container div {
  flex: 1;
  border: 1px solid #ccc;
  background: gray;
}

.small {
  max-width: 50px;
}

.medium {
  max-width: 150px;
}

Answer 3

Answer №2

To address this issue effectively, a commonly used method involves enclosing all the elements within a wrapper with position: relative or alternatively setting the body's position to relative and positioning all inner elements as absolute. The styling for each element can then be set as follows:

.navbar {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 50px;
}

.main-content {
    position: absolute;
    top: 0px;
    left: 50px;
    bottom: 0px;
    right: 150px;
 }

.sidebar {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 150px;
 }

It is important to note that the container element must have a specified height for this layout technique to function properly.

Answer 4

To address this issue effectively, a commonly used method involves enclosing all the elements within a wrapper with position: relative or alternatively setting the body's position to relative and positioning all inner elements as absolute. The styling for each element can then be set as follows:

.navbar {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    width: 50px;
}

.main-content {
    position: absolute;
    top: 0px;
    left: 50px;
    bottom: 0px;
    right: 150px;
 }

.sidebar {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 150px;
 }

It is important to note that the container element must have a specified height for this layout technique to function properly.

How about creating a responsive layout using only CSS3 for dynamic width adjustments?

Answer №1

Answer №2

Similar questions

Developing a progress bar with jQuery and Cascading Style Sheets (

A div housing a jQuery progress bar within an unordered list (ul)

Update the CSS for InputLabel

Menu disappears below the screen

What is the best way to implement the Gotham-Light font using @font-face?

Consider implementing a fixed position to the navigation bar

The proper functioning of border-collapse and empty-cells together is not achieved

Creating a dynamic star rating system using CSS

scrollbar not appearing in Safari OSX

Bootstrap - Progress Bar Display

Integrating video content directly into HTML code is a powerful

Chrome page loading with smooth color transitions

Exploring ways to distribute the height of parent div among child divs

What steps do I need to follow to create a 3D shooting game using HTML5 Canvas?

Python Selenium: Strategies for Iteratively Waiting for a Clickable Element

Creating a custom dynamic favicon and title in NextJS

Styling the elements that are next to each other using CSS

How can we add a class to a radio button using jQuery when it is checked, and remove the class when it

How can I showcase a different component within another *ngFor loop?

Ensure the child element is completely visible when it exceeds the size of its parent