Dynamic Width DIV Next To A Static Width DIV
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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<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>
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.
Post a Comment for "Dynamic Width DIV Next To A Static Width DIV"