Элементы внутри друг друга

Question

Я разрабатываю простую тему css, и я использую левый-правый-правый макет, я использую float для позиционирования правого и левого элементов и margin для центра. Но если я взгляну на веб-сайт, все части сайта попадут друг в друга.

Вот что у меня прямо сейчас:

HTML

<div class="container"> 
    <div class="right"> 
     <div class="block"> 
      <div class="title">My Block Of Data Here Is Title</div> 
      This is my block of data! Here i can show website stats and announcements. 
     </div> 
    </div> 
    <div class="left"> 
     <div class="block"> 
      <div class="title">My Block Of Data Here Is Title</div> 
      This is my block of data! Here i can show website stats and announcements. 
     </div> 
    </div> 
    <div class="center">     
     <div class="block"> 
      <div class="title">Welcome to SITE_TITLE_HERE!</div> 
      This is where we post so many stuff!<br><br><br><br><br><br><br><br><br><br>Thanks, SITE_TITLE_HERE stuff. 
     </div> 
    </div> 
</div> 

CSS

body{ 
    font-family: 'Open Sans Condensed', sans-serif; 
    font-size: 18px; 
} 

.container{ 
    margin: 0 auto; 
    width: 65%; 
} 

.left{ 
    float: left; 
    width: 20%; 
} 

.right{ 
    float: right; 
    width: 20%; 
} 

.center{ 
    margin: 0 auto; 
    width: 60%; 
} 

.block{ 
    width: 100%; 
    padding: 3px; 
    background: #fafafa; 
    outline: 1px solid #f2f2f2; 
    outline-offset: 2px; 
    text-align: center; 
} 

.block .title{ 
    font-size: 24px; 
    border-bottom: 1px solid #000; 
    background: #76E0EE; 
} 

Fiddle: http://jsfiddle.net/XK6dN/2/

Обновление: Я почти уверен, что это outline класса блоков, но даже если он Это так. как я могу удержать их от переопределения друг друга?

Answer 1

Это просто потому, что ширина элементов не складываются.

Заполнитель/границы рассчитываются по ширине элемента, поэтому:

20% + 20% + 60% + 6px (дополнение) + 2px (границы) =100%!.

Вы можете изменить коробчатую модель элемента, чтобы включить прописку/границу в свой расчет ширины, используя свойство box-sizing.

jsFiddle example

.block{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

Существует еще проблема, хотя, так как каждый элемент имеет outline из 1px на каждой стороне.

Я предлагаю изменить это на border, тем самым решая проблему.

В качестве альтернативы вместо box-sizing вы можете использовать calc() для вычитания отступов/границ от ширины элементов.

jsFiddle example

.left{ 
    float: left; 
    width: calc(20% - 8px); 
} 

.right{ 
    float: right; 
    width: calc(20% - 8px); 
} 

.center{ 
    margin: 0 auto; 
    width: calc(60% - 8px); 
} 

Answer 2

Это происходит потому, что для ребенка .block элементы каждого плавали DIV, а также центрированную один, вы объявляющий ширину на 100% (следовательно, унаследованный ширин родителей) и дополнительный 6PX в ширину (3px левый и правый обивка). Это приводит к переполнению содержимого, поскольку вы добавляете 6px поверх 100% ширины.

Чтобы исправить это, объявить box-sizing: border-box на .block:

.block { 
    box-sizing: border-box; /* Makes magic happen */ 
    width: 100%; 
    padding: 3px; 
    background: #fafafa; 
    outline: 1px solid #f2f2f2; 
    outline-offset: 2px; 
    text-align: center; 
} 

Это не магия по себе, но с помощью border-box box model, вы заставляете ширину 100%, чтобы включить все возможные украшения, в том числе контур, границы и прокладки, которые должны учитываться при вычислении конечной ширины.

http://jsfiddle.net/XK6dN/3/