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

Hovering into Transition Time

JavaScript, PHP handlers, and CommentBox all work together seamlessly to create

Completely different method for transmitting an array to NodeJS through AJAX

Have you ever wondered why the React HeroIcons architecture includes React.createElement instead of simply returning plain SVG elements?

Implementing jQuery and JavaScript validation for email addresses and usernames

Angularjs still facing the routing issue with the hashtag symbol '#' in the URL

Determining the successful completion of an ajax request using jQuery editable plugin

Creating CSS-style overlayed images that are resizable

Problem Encountered with Inaccurate Binding of Dynamic Form Control Values in Angular

Image not found in PDF created from HTML to PDF conversion

Having trouble getting your jQuery code to work in your HTML document after converting it to

Send in the completed form with your chosen preferences

Using a function from one class within another class by passing it as a prop

"Utilizing the v-autocomplete component with on-select and on-remove events in Vuet

What is the best way to divide my JavaScript objects among several files?

Emphasize rows in the MUI-Datatables framework

Restrict the selection of dates in the jQuery UI datepicker by disabling public holidays, weekends, the next day after 10am, and only allowing Tuesday, Wednesday, and Thursday as

Is it possible for two components to send two distinct props to a single component in a React application?

Karma Test Requirement: make sure to incorporate either "BrowserAnimationsModule" or "NoopAnimationsModule" when using the synthetic property @transitionMessages within your application

What is the best way to place text side by side with an image?