Home/ Questions/Q 3678554
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T03:21:20+00:00

Ok so the question is simple: I have a variable width and height div

  • 0

Ok so the question is simple:

I have a variable width and height div and I want to position next to it another “element” which is basically a bar made up of 3 components (top-fixed, middle-variable height, bottom-fixed) just like any scrollbar. And, just like any scrollbar, i want to to always be the size of the div it is “attached” to, regardless of its size and when it resizes.

The code bellow does that (i haven’t found a better way, if you do, please tell me 🙂 )

But now here’s the trick. If you change the name of the file from test.html to test.xhtml (that’s it!) it stops working. Check out the example (in Firefox) and see for yourselves (in Chrome it works)

http://stefan.apsaa.eu/test/test.html – then simply put an “x” in front of the test.html and hit enter again…. in firefox….

so. if you guys know how to fix it, or know a better way that works with both xhtml and html, i’d be grateful

Just to be clear: I want a VARIABLE WIDTH and HEIGHT 🙂 (the scrollbar was given just as an example)

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="en-ca">
 <head>

    <style>
        .handle{
            width               : 5px;
            height          : 100% !important; 
            margin          : 0;
            padding             : 0;
            overflow            : hidden;
        }
        .handle a{
            position : relative;
            display             : inline-block !important; 
            height              : 100% !important;
            text-decoration : none;
        }
        .handle a:hover{
            height  : 100% !important;
        }
        .handle-top{
            background  : url(images/borders/standard/border-top.png) no-repeat 0 0;
            height      : 100% !important;
        }
        .handle-middle{
            background      : url(images/borders/standard/border-mid.png) repeat-y 0 0;
            height          : 100% !important;
        }
        .handle-bottom{
            background  : url(images/borders/standard/border-bot.png) no-repeat 0 100%;
            height      : 100% !important;
        }
    </style>

 </head>

 <body>
    <table cellspacing="0" cellpadding="0" class="wrapper" style="margin: 0px;">
        <tbody>
            <tr>
                <td class="handle">
                    <a href="#">
                        <div class="handle-top">
                            <div class="handle-bottom">
                                <div class="handle-middle">!</div>
                            </div>
                        </div>
                    </a>
                </td>
                <td width="100%" class="contentHolder">
                    <div class="section tCollapsible" style="margin: 0px;">
                        <h4>This is a DIV</h4>
                        Test<br />asdsa
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
 </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you have markup like this:

    <div class="scroll-container">
  <div class="content"></div>
  <div class="scroll-bar">
    <div class="up-button"></div>
    <div class="track"></div>
    <div class="down-button"></div>
  </div>
</div>

    CSS like this should work:

    .scroll-container {
    position: relative; /* really, any non-static will do */
    width: 800px;
    height: 300px;
}

.scroll-container .content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 20px;
    overflow: hidden;
    background-color: red;
}

.scroll-container .scroll-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    right: 0;
}

.scroll-container .scroll-bar .up-button {
    position: absolute;
    top: 0;
    height: 20px;
    left: 0;
    right: 0;
    background-color: green;
}

.scroll-container .scroll-bar .down-button {
    position: absolute;
    bottom: 0;
    height: 20px;
    left: 0;
    right: 0;
    background-color: blue;
}

.scroll-container .scroll-bar .track {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    right: 0;
    background-color: yellow;
}

    Update:

    OK, here’s how to modify it so it’s variable-height (was confused by the scroll bar thing):

    .scroll-container {
    position: relative; /* really, any non-static will do */
}

.scroll-container .content {
    margin-right: 20px;
    background-color: red;
}

    Update 2:

    Updated sample using the same CSS classes you posted:

    <!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css">
        .container {
            position: relative; /* really, any non-static will do */
        }

        .container .content {
            margin-left: 5px;
            background-color: red;
        }

        .container .handle {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 5px;
            left: 0;
        }

        .container .handle .handle-top {
            position: absolute;
            top: 0;
            height: 5px;
            left: 0;
            right: 0;
            background-color: green;
        }

        .container .handle .handle-bottom {
            position: absolute;
            bottom: 0;
            height: 5px;
            left: 0;
            right: 0;
            background-color: blue;
        }

        .container .handle .handle-middle {
            position: absolute;
            top: 5px;
            bottom: 5px;
            left: 0;
            right: 0;
            background-color: yellow;
        }    
    </style>
  </head>
  <body>
    <div class="container">
      <div class="handle">
        <div class="handle-top"></div>
        <div class="handle-middle"></div>
        <div class="handle-bottom"></div>
      </div>
      <div class="content" style="width: 400px; height: 623px">
      </div>
    </div>
  </body>
</html>
    • 0