Css плавающие выпуски

Question

Привет, у меня есть несколько трудностей с моими плавучими контейнерами, у меня есть 2 контейнера, 1 слева и 1 справа. Левый контейнер плавает влево. Однако, если левый контейнер равен 200px, то правый контейнер не должен настраиваться на 200 px, потому что, очевидно, это плавающий элемент. Однако в моей ситуации он настраивается, и я не знаю, как это исправить.

Синий контейнер - это обертка, тогда у вас есть 2 красных контейнера, однако вы можете видеть, что правый контейнер регулирует его высоту влево, что он не делает.

Некоторые код, я использую:

<div class="mcsf_posts"> 
      {% for post in posts %} 
      <div class="mcsf_post"> 
       <div class="mcsf_post_author"> 
        <div class="mcsf_post_author_image"> 
         <img src="{{ asset('/bundles/maximcms/images/blank.gif') }}" data-src="http://minotar.net/avatar/{{ post.createdBy.username }}/45.png" alt="mc the mass logo"/> 
         <noscript> 
          <img src="http://minotar.net/avatar/{{ thread.createdBy.username }}/45.png" rel="tooltip" data-original-title="{{ post.createdBy.username }}" alt="{{ post.createdBy.username }}"> 
         </noscript> 
        </div> 
        <div class="mcsf_post_author_info"> 
         <p class="mcsf_post_author_name">{{ post.createdBy.username }}</p> 
         <p class="mcsf_post_author_title">Moderator</p> 
        </div> 
       </div> 
       <div class="mcsf_post_content"> 
        <div> 
         {{ post.text|raw }} 
        </div> 
        <div class="mcsf_post_content_lowerbar"> 
         <span class="mcsf_post_createdOn">{{ post.createdOn|date('M j \, Y H:i:s') }}</span> 
        </div> 
       </div> 
      </div> 
      {% endfor %} 
     </div> 

CSS:

.mcsf_post { 

} 
.mcsf_post + .mcsf_post { 
    margin-top:10px; 
} 
.mcsf_post_author { 
    float: left; 
    width: 120px; 
    border: 1px solid #DDD; 
    background: white; 
    border-radius: 5px; 
    padding: 10px; 
} 
.mcsf_post_content{ 
    margin-left: 131px; 
    border: 1px solid #DADADA; 
    height: auto!important; 
    background: white; 
    border-radius: 5px; 
    padding: 10px; 
} 

Answer 1

это link должно оказать помощь его в качестве примера, который демонстрирует тот же сценарий. Однако простое использование поплавков для обоих элементов должно решить вашу проблему.

Answer 2

Я нашел и решил проблему, у родительского элемента было cleafix, и из-за этого он сделал правильный контейнер с той же высотой, что и содержимое слева +. Удаление clearfix и добавление четкости: слева в правильной позиции решена моя проблема