Skip to content Skip to sidebar Skip to footer
Home / Asp.net / Css / Html

Dynamic Width Div Next To A Static Width Div

Post a Comment
Its in all in the title. I'm trying to get a div on the left of the page to a static width 170px; this works fine. What I'm having issues with is getting a div next to it, that sca

Solution 1:

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><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script><scripttype="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><styletype="text/css">#left { width: 170px; float: left; border: solid 1px red; }
      #right { margin-left: 170px; border: solid 1px green; }
    </style></head><body><divid="left">Test</div><divid="right">Test Right</div><inputid="toggle"value="Open/Close"type="button" /></body></html>

Solution 2:

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.

You may like these posts

Post a Comment for "Dynamic Width Div Next To A Static Width Div"