Граница между divs

Question

Я новичок в CSS и задавался вопросом, как установить границу между div s в этом случае посередине между зеленым и синим?

Html:

<div class="wrap"> 
<div class="left"> 

</div> 
<div class="right"> 

</div> 

CSS:

.wrap { 
    background: gray; 
    overflow: hidden; 
    width: 1024px; 
    min-height: 400px; 
    position: relative; 
    margin: auto; 
} 

.right { 
    float: right; 
    width: 70%; 
    min-height: 550px; 
    background: blue; 
    position: relative; 
    border-left: 1px solid; 
} 

.left { 
    float: left; 
    width: 30%; 
    min-height: 550px; 
    background: green; 
    margin: auto; 
    border-right: 1px solid; 
} 

Answer 1

Есть несколько способов решить эту проблему:

Самый простой один будет использовать box-sizing: border-box;, который сделает пограничную часть блока элемента. Поэтому 30% + 70% будут по-прежнему составлять до 100%. Тем не менее, это только partially supported.

.right, .left{ 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

См. a fiddle для этого.

Другой подход можно использовать будет использовать абсолютное позиционирование вместо плавающей (поэтому вызывает простое перекрытие элементов, взятых из потока документов):

.right, .left{ 
    float: none; 
    position: absolute; //make sure the parent element has relative positioning here 
} 
.right{ 
    right: 0; 
} 
.left{ 
    left: 0; 
} 

См another fiddle

Затем, есть также известково (который не является слишком well supported), что позволяет вычесть один пиксель от вашего процентного значения:

.left{ 
    width: -webkit-calc(30% - 1px); 
    width: -moz-calc(30% - 1px); 
    width: calc(30% - 1px); 
} 
.right{ 
    width: -webkit-calc(70% - 1px); 
    width: -moz-calc(70% - 1px); 
    width: calc(70% - 1px); 
} 

Опять же, a fiddle

Answer 2

.right { 
    float: right; 
    width: 70%; 
    min-height: 550px; 
    background: blue; 
    outline: 1px solid #000; 
} 

.left { 
    float: left; 
    width: 30%; 
    min-height: 550px; 
    background: green; 
} 

Answer 3

Вы можете использовать макет таблицы CSS. Проверьте, что Working Fiddle

При поддержке IE8 +, Перекрестный браузер.

HTML: (очень чистый и простой)

<div class="wrap"> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 

CSS: (простой в обслуживании и Cross-Browser)

.wrap { 
    background-color: gray; 
    width: 1024px; 
    min-height: 400px; 
    display: table; 
    border-collapse: collapse; 
} 
.left, .right 
{ 
    display: table-cell; 
    min-height: 550px; 
} 
.right { 

    width: 70%; 
    background-color: blue; 
    border-left: 1px solid black; 
} 
.left { 
    width: 30%; 
    background-color: green; 
    border-right: 1px solid black; 
}