Home/ Questions/Q 7089417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:55:09+00:00

I have a setup with two side panels, one as float:left and one as

  • 0

I have a setup with two side panels, one as float:left and one as float:right, and an iframe in between them. I want the two side panels to always have a width of 150px, and the iframe to fill the rest of the page. I am attempting to do this using jQuery to make functions that change the iframe width dynamically when the window is resized, yet it is not working. Here is what I have so far:

<body>

...

<script src="jquery.js">

        function setFrameSize() {
            $("#ifrm").width($(window).width() - $("#leftPanel").width() - $("#rightPanel").width());
        }

        $(window).resize(function() { setFrameSize(); });

        $(document).ready(function() { setFrameSize(); });

        </script>

...
</body>

Can anyone tell me why this is not working? Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s much better to do it with CSS:

    http://jsfiddle.net/7pbJb/

    HTML:

    <div id="left"></div>
<div id="center"></div>
<div id="right"></div>

    CSS:

    div{
    position:fixed;
    height:500px;}
#left{
    background:blue;
    left:0px;
    width:150px;
}
#center{
    background:green;
    right:150px;
    left:150px;
}
#right{
    background:orange;
    right:0px;
    width:150px;
}

    Setting the left and right position of the center div causes it to stretch.

    • 0