Расстояние в пикселях между делениями ширины в процентах (в Столбцах)?

Я искал по всему этому сайту и нашел много подобных проблем, но не смог найти исправления, которое работало бы для моей ситуации.

Итак, я хотел протестировать новый макет, который будет показывать два столбца, и в каждом столбце можно добавить поле с некоторым текстом.

Моя проблема заключается в том, что я хочу абсолютное количество пространства между столбцами (например, 5px).

Я попытался добиться этого, установив ширину каждого столбца в ~49%, но это фактически перекрывает столбцы в определенной точке, если окно переформатировано слишком мало.

Я также хотел бы сохранить поле размером 5 пикселей с левой и правой стороны экрана.

Вот JSFiddle того, что я пробовал: http://jsfiddle.net/sbz3k/

HTML: 

<body>
<div class="logo">logo here</div>
<div class="wrapper">
    <div class="left">
        <!--left side-->
        <div class="box">test
            <br/>test
            <br/>test</div>
        <!--left side end-->
    </div>
    <div class="right">
        <!--right side-->
        <div class="box">test
            <br/>test
            <br/>test
            <br/>test
            <br/>test
            <br/>test
            <br/>test</div>
        <!--right side end-->
    </div>
</div>
</body>

Соответствующий CSS: 

.wrapper {
position:relative;
padding-top:88px;
width:100%;
}

.left {
padding:3px;
width:49%;
left:5px;
position:absolute;
}

.right {
padding:3px;
width:49%;
right:5px;
position:absolute;
}

.box:hover {
border:1px solid #AAAACC;
color:#000000;
}

.box {
color:#333333;
background-color:#FFFFFF;
border:1px solid #CCCCCC;
border-radius:5px;
padding:8px;
margin-top:5px;
word-wrap:break-word;
text-align:justify;
cursor:default;
font-family:Cambria;
}

p {
margin:.5em;
text-indent:20px;
}

Также на менее важной ноте я задаюсь вопросом, не неправильно ли я стилизовал бар вверху (в jsfiddle), так как я хотел только тень внизу.

2 2
html css percentage width

2 ответа:

Использовать border-box 

body {
    background-color:#DFDFDF;
}
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
} 
.wrapper {
    position:relative;
    padding-top:88px;
    width:100%;
}
.left { 
    width:50%;
    left:0;
    padding: 5px;
    position:absolute;
}
.right {
    right:0;
    width:50%; 
    padding: 5px;
    position:absolute;
}

Http://jsfiddle.net/NicoO/sbz3k/2/

Обновление, чтобы сделать тень немного более тонкой, вы можете попробовать что-то вроде этого: 

box-shadow:#000000 0px 1px 3px -1px;
4

Также может быть идея заглянуть в функцию calc () 

.left {
   padding:3px;
   width:calc(50% - 6px);
}
3