ansaurus

Question

Dynamic width DIV next to a static width DIV

Answer 1

+4 A:

On the right-hand div, just set a margin:

style="margin-left: 170px;"

Here's an example page, works here:

<html>
  <head>
    <title>Jquery Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
      $(function()  {
        var right = $("#right");
        $("#toggle").click(function() {
          $("#left").animate({"width": "toggle"}, {
            duration: 250,
            step: function() {
                right.css("margin-left", $(this).width());
            }
          }, function() { right.css("margin-left", $("#left").width()); });             
        });
      });
    </script>
    <style type="text/css">
      #left { width: 170px; float: left; border: solid 1px red; }
      #right { margin-left: 170px; border: solid 1px green; }
    </style>
  </head>
  <body>
    <div id="left">Test</div>
    <div id="right">Test Right</div>
    <input id="toggle" value="Open/Close" type="button" />    
  </body>
</html>

Nick Craver 2010-01-20 21:36:24

what if you want to put content there?

Robert Greiner 2010-01-20 21:37:38

I tried this, and it added 170px of scrolling to the right.

Nate Bross 2010-01-20 21:37:45

@Robert Greiner: There is already content...the left-hand div

Nick Craver 2010-01-20 21:38:13

@Nate Bross: I added an example page, they combine to form 100% width, no horizontal scrolling...is this not what you're after?

Nick Craver 2010-01-20 21:41:45

+1 that worked for me.

Robert Greiner 2010-01-20 21:50:41

Now, assume that I want to expand and collapse the div on the left, I would simply adjust it's "width" property and the "margin-left" of the rght div at te same time via my JS "Collapse" method?

Nate Bross 2010-01-20 22:31:47

@Nate Bross: I added to the example page showing how to toggle the thing open/closed with a button. Let me know if this isn't what you're after. Using jQuery's step callback you can ensure the divs are in sync while they animate.

Nick Craver 2010-01-20 23:20:04

Wow thanks. Above and beyond. I was simply asking if that was the right approach. Thanks!

Nate Bross 2010-01-20 23:22:31

Answer 2

+1 A:

You can define your css classes like this:

#left-div {
    margin-left: 0px;
    width: 170px;
    float: left;
}
#right-div {
    margin-left: 170px;
    margin-right: 0px;
}

This will keep the left margin of the right div next to the left div, and the right margin at the right edge of the window.

Aaron 2010-01-20 21:37:51

Will this allow me to put a table inside and set its width to 100% and fill all the space of #right-div?

Nate Bross 2010-01-20 21:40:07

Yes, you will be able to put a 100% width table. Set the id of the divs to "left-div" and "right-div" respectively.

Aaron 2010-01-20 21:49:15

ansaurus

tags:

views:

answers:

Dynamic width DIV next to a static width DIV

related questions