Content

CSS HowTo Fill Remaining Width
 Using Table Cell to Fill Remaining Width

CSS HowTo Fill Remaining Width

Using Table Cell to Fill Remaining Width

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head >
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <style>
            body, html {
                height: 100%; width: 100%; background: #222; display: flex;
                align-items: center; justify-content: center; flex-direction: column;}
            input {margin-top: 10px;}
            #wrapper {
                width: 500px; height: 50px; background: #444;
                position: relative; display: flex;}
            #wrapper::before {
                content: ''; width: 10%; height: 50px; position: absolute;
                background: linear-gradient(0deg, #00be1abf, #5fed00b3); left: 0px;}
            #wrapper::after {
                content: ''; width: 50px; height: 50px; position: absolute;
                background: linear-gradient(0deg, #9f0000ff, #f10000ff); right: 0px;}
            #splitter {
                position: relative; width: 10px; height: 50px; background: #ddd;
                transform: translateX(-50%); z-index: 99;}
        </style>
    </head>
    <body>
        <div id='wrapper'>
            <div id='splitter' style='left: 10%'></div>
        </div>
        <input id='slider' type='range' min='0' max='100' value='10' />
        <script type="text/javascript">
            document.getElementById("slider").addEventListener("change", function() {
                document.getElementById("splitter").style.left = this.value + "%";
                var sytleElement = document.head.appendChild(document.createElement("style"));
                sytleElement.innerHTML = "#wrapper:before {width: " + this.value + "%" + '  }';
            })
        </script>
    </body>
</html>

HTML Web Page Embedded Output:

©sideway

ID: 211100028 Last Updated: 11/28/2021 Revision: 0 Ref: