Creating a three-column layout in HTML5 with resizable left and center columns, and a fixed right column

Looking to create a full screen layout with three columns, where the left/center column is resizable and the right column remains fixed.

Currently using the resize style for the left area, but running into issues as the center area does not adjust in size properly. I'm open to using flex if that's a better approach. It needs to be compatible with HTML5 for web-sockets without relying on JavaScript for styling.

Thank you! :-)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy"  content="connect-src * 'unsafe-inline';">
        <style>
            body    {
                    margin:0;
                    padding:0;
                    }

            #container      {
                                overflow: none;
                                height: 100vh;
                                width: 100vw;
                                margin: 0;
                                padding: 0;
                            }

            #a_left         {
                                float:left;
                                height: 100vh;
                                width: 75%;
                                background-color: black;
                                overflow:auto;
                                resize: horizontal;
                            }
            #a_center       {
                                float:left;
                                height: 100vh;
                                min-width: 80px;
                                width:10%;
                                overflow: none;
                                background-color:darkgray;
                            }
            #a_right        {
                                float:right;
                                height: 100vh;
                                width: 40px;
                                min-width: 40px;
                                max-width: 40px;
                                overflow:none;
                                background-color:darkslategray;
                                color:white;
                            }

            #al_text        {
                                width: 100%;
                                height: 95%;
                                overflow-y: auto;
                                background-color: black;
                                color:white;
                            }
            #al_cmd         {
                                width: 100%;
                                height: 5%;
                                overflow: none;
                                background-color: darkslategray;
                            }
            #ac_map         {   width:100%;
                                height: 25%;
                                overflow: hidden;
                                background-color: #222222;
                                color: white;
                            }
            #ac_paged       {   width:100%;
                                height: 75%;
                                overflow-y: auto;
                                background-color: #222222;
                                color: white;
                            }


    </style>
    </head>
    <body>
        <div class="container">
        <div id="a_left">
            <div id="al_text" role="log" aria-live="polite">
                A lot of text goes here.
            </div>
            <div id="al_cmd">
                <table width="100%">
                    <tr>
                        <td style="width:10%; color:white;">Command</td>
                        <td style="width:70%;"><input style="width:97%;" type="text" id="message"/></td>
                        <td style="width:15%;"><input id="btnSend" type="button" value="Send" disabled="disabled" onclick="onSendClick()"></td>
                    </tr>
                </table>                            
            </div>
        </div> <!-- /a_left -->
        <div id="a_center">
            <div id="ac_map">
                An image goes here.
            </div>
            <div id="ac_paged" aria-live="polite">
                Text that sticks goes here and it could be very long. 
            </div>
        </div> <!-- /a_right -->
        <div id="a_right">
            In<br/>
            Eq<br/>
            He<br/>
        </div>        
        </div> <!-- /container -->

        </body>
</html>

EDIT1:

After implementing Antonio's solution, I found better results by starting with a large left column DIV and a fixed right column DIV. Then placing the left and center columns inside the left column, making them resizable. This approach improves the user experience while resizing.

Answer №1

To achieve the desired layout, utilize the 'display: flex' property in your CSS.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy"  content="connect-src * 'unsafe-inline';">
        <style>

body    {
          margin:0;
          padding:0;
          }

  #container      {
                      /*! overflow: none; */
                      height: 100vh;
                      width: 100vw;
                      margin: 0;
                      padding: 0;
                      display: flex;
                  }

  #a_left         {
                      /*! float:left; */
                      height: 100vh;
                      width: 75%; /* <--- Initial Width */
                      background-color: black;
                      overflow:auto;
                      resize: horizontal;
                  }
  #a_center       {
                      /*! float:left; */
                      height: 100vh;
                      min-width: 80px;
                      /*! width:10%; */
                      /*! overflow: none; */
                      background-color:darkgray;
                      flex: auto;
                  }
  #a_right        {
                      /*! float:right; */
                      height: 100vh;
                      width: 40px;
                      /*! min-width: 40px; */
                      /*! max-width: 40px; */
                      overflow:none;
                      background-color:darkslategray;
                      color:white;
                  }

  #al_text        {
                      width: 100%;
                      height: 95%;
                      overflow-y: auto;
                      background-color: black;
                      color:white;
                  }
  #al_cmd         {
                      width: 100%;
                      height: 5%;
                      overflow: none;
                      background-color: darkslategray;
                  }
  #ac_map         {   width:100%;
                      height: 25%;
                      overflow: hidden;
                      background-color: #222222;
                      color: white;
                  }
  #ac_paged       {   width:100%;
                      height: 75%;
                      overflow-y: auto;
                      background-color: #222222;
                      color: white;
                  }



    </style>
    </head>
    <body>
        <div id="container">
        <div id="a_left">
            <div id="al_text" role="log" aria-live="polite">
                A lot of text goes here.
            </div>
            <div id="al_cmd">
                <table width="100%">
                    <tr>
                        <td style="width:10%; color:white;">Command</td>
                        <td style="width:70%;"><input style="width:97%;" type="text" id="message"/></td>
                        <td style="width:15%;"><input id="btnSend" type="button" value="Send" disabled="disabled" onclick="onSendClick()"></td>
                    </tr>
                </table>
            </div>
        </div> <!-- /a_left -->
        <div id="a_center">
            <div id="ac_map">
                An image goes here.
            </div>
            <div id="ac_paged" aria-live="polite">
                Text that sticks goes here and it could be very long.
            </div>
        </div> <!-- /a_right -->
        <div id="a_right">
            In<br/>
            Eq<br/>
            He<br/>
        </div>
        </div> <!-- /container -->

        </body>
</html>

Answer №2

Is this functioning correctly?

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="Content-Security-Policy"  content="connect-src * 'unsafe-inline';">
      <style>
         body    {
         margin:0;
         padding:0;
         }
         #al_text        {
         width: 100%;
         height: 95%;
         overflow-y: auto;
         background-color: black;
         color:white;
         }
         #al_cmd         {
         width: 100%;
         height: 5%;
         overflow: none;
         background-color: darkslategray;
         }
         #ac_map         {   width:100%;
         height: 25%;
         overflow: hidden;
         background-color: #222222;
         color: white;
         }
         #ac_paged       {   width:100%;
         height: 75%;
         overflow-y: auto;
         background-color: #222222;
         color: white;
         }
         .container {
         display: flex;
         flex-flow: row nowrap;
         width: 100%;
         div{
         height: 100vh;
         }
         }
         #a_left {
         overflow: auto;
         resize: horizontal;
         height: 100vh;
         max-width: 75%;
         width: 100%;
         }
         #a_center {
         min-width: 80px;
         width: 100%;
         overflow: none;
         }
         #a_right {
         max-width: 40px;
         width: 100%;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div id="a_left">
            <div id="al_text" role="log" aria-live="polite">
               A significant amount of text is placed here.
            </div>
            <div id="al_cmd">
               <table width="100%">
                  <tr>
                     <td style="width:10%; color:white;">Command</td>
                     <td style="width:70%;"><input style="width:97%;" type="text" id="message"/></td>
                     <td style="width:15%;"><input id="btnSend" type="button" value="Send" disabled="disabled" onclick="onSendClick()"></td>
                  </tr>
               </table>
            </div>
         </div>
         <!-- /a_left -->
         <div id="a_center">
            <div id="ac_map">
               An image will be displayed here.
            </div>
            <div id="ac_paged" aria-live="polite">
               Lengthy text is inserted here and it may extend indefinitely. 
            </div>
         </div>
         <!-- /a_right -->
         <div id="a_right">
            In<br/>
            Eq<br/>
            He<br/>
         </div>
      </div>
      <!-- /container -->
   </body>
</html>

The #a_left has a maximum width set to 75%, while the #a_center should have a minimum width of 80px, with the #a_right occupying a maximum width of 40px.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The appearance of the Bootstrap button is not displaying correctly

My current button looks like this: https://i.sstatic.net/PyP8v.png As seen in the image above, there is something strange at the back of the button. How can I resolve this issue? I am working on a small project using Django and Bootstrap. Thank you in a ...

Tips on showing a specific div when a button is clicked using jQuery and Bootstrap

In my button group, I have four buttons and I need one specific button to display certain div content when clicked. The displayed content should be based on which button is clicked. Is there a way to achieve this using Twitter Bootstrap jQuery in ASP.NET ...

Encountering an unforeseen issue with my code

I am currently developing a web application in advanced Java and incorporating various external libraries such as choosen.js, summernote.js, Bootstrap, BootstrapValidator, etc. I have encountered some errors and am struggling to pinpoint the root cause of ...

The dynamic loading of an HTML/JavaScript input range object within a div is not functioning properly

Hey there, I have a hidden div containing a range input: <div id="hiddencontainer" style="display:none;"> <input id="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/> </div> The ...

including information inputted into a form into a data-storage system

I have set up a webform for users to request access to my CV. After submission, I aim to save their details in a phpMyAdmin database. As a PHP beginner handling databases within an HTML file, I received some code that needed modifications to fit my form fi ...

Tips for integrating PHP into a Bootstrap modal dialog

After discovering and modifying a php script designed to process contact form content and display alerts on a Bootstrap 3 modal window, I encountered some issues. While I was able to successfully display errors and show the modal onload without any php con ...

Targeting images within content in Wordpress

In my custom Wordpress theme, specifically on the single-post page where individual posts are displayed, I have implemented the following code: <article id="post-<?php the_ID(); ?>"<?php post_class('col-md-12'); ?>> <div cla ...

Capturing and saving location data without internet connection, and then displaying markers once connectivity is restored

I am currently developing a web application that will monitor the user's location. I want to ensure its reliability, so even if the user loses internet connection, the application will continue tracking their location (since GPS does not rely on inter ...

Is it possible to make a link_to, which is essentially a normal <a href>, clickable through a div that is also clickable?

I am currently dealing with a clickable div element which has a collapse functionality, and there is also a link placed on top of it: <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-h ...

Revamp your Redux Form with a fresh new 'Field' label style

Is there a way to style the label of a Redux Form field? The Redux Form API does not provide information on how to apply styles to the label. Despite applying the classes.formField class, the label itself remains unstyled. Could this be an issue with inhe ...

(HTML) centralizing link storage

Hello, I am looking to create an HTML file but I am unsure of how to store links in a separate file. The code I currently have is: <a title="DESCR" href="LINK" target="_blank" style="color: white">NAME</a> ...

How can I prevent a horizontal scrollbar from appearing in HTML when using margin:-4px and what are some possible solutions to this

I am facing an issue with a <div> element that contains a grid row element from semantic UI. Despite setting the width to 100%, there is a small space visible on all sides of the row element. I tried using margin: -4px to eliminate the white space, b ...

Ensure that the heading cells in the table header (thead) are properly

Struggling with aligning the thead with the td in the tbody? I attempted adjusting the thead using display: table-header-group;, but discovered that padding doesn't work on 'table-header-group'. This led me to try adding padding-left to my t ...

The Challenges of Parsing HTML Source Code for Web Scraping

I've been attempting to scrape data from this website: (specifically rare earth material prices) using Python and BeautifulSoup. My query pertains not to Python, but rather the HTML source code of the site. When I utilize Firefox's "Inspect Elem ...

The image fails to reach full width and does not expand correctly when I zoom out

At the bottom of my website, I have a bar for displaying certain content. However, I am facing an issue where the bar is not extending to cover the entire screen width despite having code in place to do so. The HTML code is quite basic: <div class="bo ...

What could be the reason that my for loop executes only when it is embedded within a while loop?

Hey there, I've been trying to understand why this code snippet works when the while loop is included: some = 0 n = 5 while some == 0: for title in itertools.islice(driver.find_elements_by_css_selector("a[class='link-title']"), ...

Is a table cell's border considered as part of its content?

A discrepancy is observed in the rendering of a document on Firefox and Chrome browsers: <!DOCTYPE html> <html> <head> <title>Testing table rendering</title> <style> table { ...

Why is my JavaScript code running but disappearing right away?

I've encountered an issue with the code I wrote below. It's supposed to display the user's names when they enter their name, but for some reason, the names keep appearing and disappearing immediately. What could be causing this problem? Her ...

Using jQuery, compare the values of two elements and update the class based on the comparison outcome

My objective is to retrieve data from a database, place it into an <li> element, and then highlight the larger of the two values obtained from these HTML <li> elements. I have created a jsfiddle, but I am uncertain about how to use the addCla ...

Improper headings can prevent Chrome from continuously playing HTML5 audio

Recently, I encountered a peculiar and unlikely issue. I created a custom python server using SimpleHTTPServer, where I had to set my own headers. This server was used to serve .wav files, but I faced an unusual problem. While the files would play in an ...