Question

I am trying to create 3 divs that perform as columns.

The left should stick to the left and be 175px.
The right should stick to the right and be 175px.
The middle should be 100% of the remaining width. (100%-(175px-175px))

This code is not working and I cannot figure out why. I feel like it is all correct but I cannot figure it out.

I tried javascript resize, what do you think?

  <script type="text/javascript">
$(function() {
   var newwidth = $(window).width() - 350;
   $("main_middle").css({width: newwidth+'px'});
});

$(window).resize(function() {
   var newwidth = $(window).width() - 350;
   $("main_middle").css({width: newwidth+'px'});
});
</script>

<div style="width:100%;height:100%;position:relative;margin:auto;">

<div style="position:fixed;width:175px;height:100%;margin-left:0;background-color:#222;">
</div>

<div id="main_middle" name="main_middle" style="float:left;position:absolute;height:100%;margin-left:175px;margin-top:38px;background-color:white;border-left:1px solid #A9A9A9;top:0px;left:0px;margin-right:200px;">
</div>


<div style="float:right;right:0px;position:relative;border-left:1px solid #A9A9A9;height:100%;background-color:white;margin-top:38px;width:200px;">
</div>

</div>

Thanks!

Answer 1

I dont know if its a typo but you are missing the # in your JQuery call

$("main_middle")

should be

$("#main_middle")