YUI CSS Basic Grid Pattern: Get width+margin on right grid (yui-ge) with jQuery

Question

I have this Basic Grid Pattern on my website:

<style type='text/css'>
  #doc3 { margin:auto; }
</style>

<div id="doc3">
  <div id="bd">
    <div class="yui-ge">
      <div class="yui-u first" id="main">
        Main content here
      </div>
      <div class="yui-u" id="right_cont">
        right content here
      </div>
    </div>
  </div>
</div>

This setup gives me this:

I'm trying to get the width of the right div + the left margin width jQuery.

$('#right_cont').width() 

Gives me the box-width only 325px. Anyone know how to do this?

Answer 1

To answer my own question:

/* Right content width + margin */
$right_content_width = $(window).width() - $('#main').width();

Is there a better way? o_O

Answer 2

Use outerWidth(), and pass a truthy value as an argument so it includes the margin.

$("#right_cont").outerWidth(true);

Docs page: http://api.jquery.com/outerWidth/