Flexible DIV Container (But Not Responsive)

First, let me say I do NOT want a responsive layout. With that settled...

I have a div container (which we will call ".container") and two elements inside of it (my content, which we will call ".left" and a sidebar which we will call ".right").

I am looking for a way to make the container equal the width of the other two including the 15px margin on .right.

I do not want to simply set the container to 715px and do not want a CSS3 solution, I want the container to be set to 715px automatically. I do not know if this is achievable through CSS but I am sure it is through jQuery. If anybody knows the easiest/cleanest/fastest way to do this it would be appreciated!

.container {
}
.left {
width: 500px;
float:left
}
.right {
width: 200px;
margin-left:15px;
float:right
}

EDIT: MY CURRENT MARKUP

#container {
    margin:0 auto;
    overflow:auto;
    clear:both;
    padding:35px 0
}

#post_content {
    clear:both;
    display:inline-block;
    float:left;
    width:660px;
    padding:0 35px 0 0;
    border-right:1px solid #EEE;
    background:#FFF
}
#sidebar {
    display:inline-block;
    float:right!important;
    width:410px;
    overflow:hidden
}


<?php get_header(); ?>

<div id="container">
<div id="post_content">

<!-- Grab posts -->
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

<!-- Breadcrumbs -->
<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>

<!-- Avatar -->
<span class="post_avatar">
    <a href="<?php echo get_bloginfo('url') . '/author/' . get_the_author_meta('login'); ?>">
    <?php echo get_avatar( get_the_author_email(), '50' ); ?>
    </a>
</span>

<!-- Title -->
<h1 class="post">
    <?php the_title(); ?>
</h1>

<!-- Post time, author, category -->
<span class="sub-title-post">By <?php the_author_posts_link( ); ?> <span class="sub-title-divider">|</span> <?php the_time('F j, Y'); ?> <span class="sub-title-divider">|</span> <a href="#commentlist"><?php comments_number( 'No comments', 'One comment', '% comments' ); ?></a>
</span>


<!-- The post -->
<?php the_content(); ?>

<!-- Tags -->
<div class="tag_spacer">

    <h3 class="tags">
    <?php the_tags('Tags ',' / ','<br />'); ?>
    </h3>

    <h3 class="tags">
    <?php $turl = getTinyUrl(get_permalink($post->ID));
echo 'Short URL <a href="'.$turl.'">'.$turl.'</a>' ?>
    </h3>
</div>

<!-- Next/Previous Posts -->
<div class="mp_archive2">
<div id="more_posts">

<div class="oe">
    <?php previous_post_link('%link', '« Previous post', TRUE); ?>
</div>

<div class="re">
    &开发者_如何学运维lt;?php next_post_link('%link', 'Next post »', TRUE); ?>
</div>

</div>
</div>

<?php comments_template(); ?>

</div>
<?php endwhile; else: ?>
<p>No matching entries found.</p>
<?php endif; ?>

<?php get_sidebar(); ?>

</div>


</div>

<?php get_footer(); ?>

The only way you can do this without resorting to javascript is by floating the container itself, like this jsFiddle.

If you're okay using jQuery for it, then you can use this jsFiddle.

$().ready(function(){
   $('.container').width($('.left').outerWidth(true) + $('.right').outerWidth(true)); 
});

Make sure you're very specific with your rules here so that .left and .right only return a single element. You're probably better off switching to IDs instead of class names in this regard.

I usually handle this with display: inline-block; and overflow: auto;

.container {
overflow: auto;
}
.left {
width: 500px;
display: inline-block;
}
.right {
width: 200px;
margin-left:15px;
display: inline-block;
}

What you'll need to watch for is that this will be semi-fluid but will correctly contain the divs but you'll need to set a width or min-width to prevent the semi-fluid part (it'll wrap if the broswer window is smaller than the content). For the width, like you suggested you can use jQuery.

You'll be able to use a sum of its children such as

var sum=0;
$('#container.div').each( function(){ sum += $(this).width(); });
$('#container').width( sum );

This is from jQuery - set div width to sum of it's children

This should do the trick. In this form it calculates the width of all children of .container, but you could easily add a selector to children to use only .left and .right:

$(".container").width(function() {
   var total = 0;
    $(this).children().each(function() {
       total += $(this).outerWidth(true); 
    });
    return total;
});

Here's a live example. The most useful part of this is the outerWidth method, which takes a parameter indicating whether or not margin should be included in the returned value.