Гибкий контейнер DIV (но не отзывчивый)

Question

Во-первых, позвольте мне сказать, что я НЕ хочу адаптивный макет. С этим поселились ...

У меня есть контейнер div (который мы назовем «.container») и два элемента внутри него (мой контент, который мы назовем «.left», и боковая панель, которую мы назовем «.right»).

Я ищу способ сделать контейнер равным ширине двух других , включая поле в 15 пикселей на .right.

Я не хочу просто устанавливать контейнер на 715px и не хочу решения CSS3, я хочу, чтобы контейнер был установлен на 715px автоматически. Я не знаю, достижимо ли это с помощью CSS, но я уверен, что это с помощью jQuery. Если кто-нибудь знает самый простой / чистый / быстрый способ сделать это, он будет признателен!

.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

Единственный способ сделать это, не прибегая к javascript, - переместить сам контейнер, например, jsFiddle .

Если вы хорошо используете jQuery, вы можете использовать this jsFiddle .

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

Убедитесь, что вы очень конкретны с вашими правилами, чтобы .left и .right возвращали только один элемент. В этом отношении вам, вероятно, лучше переключаться на идентификаторы, а не на имена классов.

Answer 2

Это должно сработать.В этой форме он вычисляет ширину всех дочерних элементов .container, но вы можете легко добавить селектор к children, чтобы использовать только .left и .right:

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

Вот живой пример .Наиболее полезной частью этого является метод outerWidth, который принимает параметр, указывающий, следует ли включать маржу в возвращаемое значение.

Answer 3

Я обычно справляюсь с этим с display: inline-block; и overflow: auto;

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

Вам нужно следить за тем, чтобы это было полужидким, но правильно содержало бы div, но вы будетенеобходимо установить ширину или минимальную ширину, чтобы предотвратить полужидкую часть (она будет перенесена, если окно броузера меньше, чем содержимое).Для ширины, как вы и предлагали, вы можете использовать jQuery.

Вы сможете использовать сумму его дочерних элементов, например

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

Это из jQuery - setширина деления на сумму его детей