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.