Create a layout using CSS that features two columns. The left column should be fluid, expanding to fill all remaining space, while the right column should be fixed

Question

Create a layout using CSS that features two columns. The left column should be fluid, expanding to fill all remaining space, while the right column should be fixed

I need to ensure that the Online Users div always remains at a fixed size of 200px, while allowing the chat window next to it to resize dynamically based on available space. Essentially, I want the chat window to adjust its width as the window is resized, without affecting the size of the Online Users window.

The left div (chat window) is referred to as entry_window

The right div (online users) is identified as online_window

#entry_window{
    border: 2px solid #D4D4D4;
    float: left;
    width: 75%;
    height: 100%;
    margin: 1%;
    overflow: scroll;
    overflow-x: hidden;
}
#online_window{

    border: 2px solid #D4D4D4;
    margin: 1%;
    margin-left: 0%;
    display: inline-block;  float: left;
    background-color: white;
    width: 21.5%;
    height: 100%;
}

Additionally, I have created a function for adjusting the vertical size of both windows to utilize maximum available height without overlapping the bottom section.

function autoscale(){
    var v = window.innerHeight - 170;
    document.getElementById("entry_window").style.height= v+"px";
    document.getElementById("online_window").style.height= v+"px";
}

javascript html css

Answer 1

Answer №1

There is a way to achieve this without relying on javascript. By utilizing absolute positioning and specifying top/left/bottom/right along with width, you can create the desired layout.

For example:

<div id="lefty">this is left content</div>
<div id="righty">this is right content</div>

Code snippet:

#lefty {
    position: absolute;
    background-color: blue;    
    top: 0;
    bottom: 0;
    left: 0;
    right: 200px;
}

#righty {
    position: absolute;
    background-color: red;
    top: 0;
    bottom: 0;
    width: 200px;
    right: 0;
}

Check out this jsfiddle link for a live demo:

http://jsfiddle.net/Lyp96yqq/

Answer 2

There is a way to achieve this without relying on javascript. By utilizing absolute positioning and specifying top/left/bottom/right along with width, you can create the desired layout.

For example:

<div id="lefty">this is left content</div>
<div id="righty">this is right content</div>

Code snippet:

#lefty {
    position: absolute;
    background-color: blue;    
    top: 0;
    bottom: 0;
    left: 0;
    right: 200px;
}

#righty {
    position: absolute;
    background-color: red;
    top: 0;
    bottom: 0;
    width: 200px;
    right: 0;
}

Check out this jsfiddle link for a live demo:

http://jsfiddle.net/Lyp96yqq/

Answer 3

Answer №2

To achieve this using display:table and table-cell, follow these steps:

*{margin:0;padding:0}

.parent {
    width:100%;
    display:table;
}
.parent > div {
    height:200px;
    line-height:200px;
    background:orange;
    display:table-cell;
}
.parent .fixed {
    width:200px;
}
.parent .flexible {
    background:red;
}

<div class="parent">
  <div class="fixed">Fixed Width</div>
  <div class="flexible">Chat Room</div>
</div>

You can also view an example on Jsfiddle.

Answer 4

To achieve this using display:table and table-cell, follow these steps:

*{margin:0;padding:0}

.parent {
    width:100%;
    display:table;
}
.parent > div {
    height:200px;
    line-height:200px;
    background:orange;
    display:table-cell;
}
.parent .fixed {
    width:200px;
}
.parent .flexible {
    background:red;
}

<div class="parent">
  <div class="fixed">Fixed Width</div>
  <div class="flexible">Chat Room</div>
</div>

You can also view an example on Jsfiddle.

Answer 5

Answer №3

To achieve this, you can utilize the css calc function. However, it's essential to consider the browsers you plan to support. You can refer to this resource to determine compatibility.

Simply follow these steps:

#content_section{
    border: 2px solid #D4D4D4;
    float: left;
    width: calc(100% - 208px);
    height: 100%;
    overflow: scroll;
    overflow-x: hidden;
    background-color:blue;
}
#sidebar_section{
    border: 2px solid #D4D4D4;
    margin-left: 0%;
    display: inline-block;  
    float: left;
    background-color: white;
    width: 200px;
    height: 100%;
}

Remember to subtract -208 to account for the border. Additionally, you can view the code in action on this jsfiddle.

Answer 6

To achieve this, you can utilize the css calc function. However, it's essential to consider the browsers you plan to support. You can refer to this resource to determine compatibility.

Simply follow these steps:

#content_section{
    border: 2px solid #D4D4D4;
    float: left;
    width: calc(100% - 208px);
    height: 100%;
    overflow: scroll;
    overflow-x: hidden;
    background-color:blue;
}
#sidebar_section{
    border: 2px solid #D4D4D4;
    margin-left: 0%;
    display: inline-block;  
    float: left;
    background-color: white;
    width: 200px;
    height: 100%;
}

Remember to subtract -208 to account for the border. Additionally, you can view the code in action on this jsfiddle.

Create a layout using CSS that features two columns. The left column should be fluid, expanding to fill all remaining space, while the right column should be fixed

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to align an image in the middle of an image slider within a Bootstrap

Deleting uploaded images in Cloudinary for Next.js is not allowed

Is there any way to determine if Bootstrap has been utilized to build my WordPress page?

What is the best way to ensure all asynchronous tasks are completed in Node.js before proceeding?

The integration of Vue JS is not displaying properly in an Electron application

What is the best way to prevent jest.mock from being hoisted and only use it in a single jest unit test?

The leave animation for Angular's ngAnimate and ng-view feature appears to be malfunctioning

Uncertainty surrounding the distinction between global variables (var) and block variables (let, const) in Node.js

Typescript: Shifting an image to the left and then returning it to the right

Unable to showcase information in a jQuery UI popup through AJAX when initially presented

I'm struggling with organizing my webpage layout using CSS flexbox and CSS grid

Heroku - JavaScript and CSS Updates Causing Loading Issues

NodeJS Express throwing error as HTML on Angular frontend

Unleashing the power of real-time communication with XMPP using AngularJS

Looking to update properties for elements within the Angular Material 16 mat-menu across the board?

Linking a Wordpress submenu to a specific section of a page

Disable the automatic scrolling feature of the daisyUI carousel when moving between slides

Ways to retrieve and contrast the border style of an image utilizing javascript

Numerous Customized Google Maps

What is V8's approach to managing dictionaries?