Question

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">
    <?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(); ?>

Answer 1

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.