Помогите, пожалуйста, разобраться с версткой.
Есть вот такая простенькая страница. На странице выводятся 4 колонки разной высоты, "приклеенные" к низу графика. У каждого div'а с помощью php задается высота и отступ сверху. Все работает прекрасно, но... при изменении ширины .graf столбики начинают ползать вверх-вниз. Как побороть этот недостаток?
И вопрос вдогонку: целесообразно ли в таких случаях подключать canvas?
<!doctype html>
<html>
<head><title></title>
<style type="text/css">
.graf{
width: 260px;
height: 260px;
padding: 20px;
}
.graf .graf_axes{
position: relative;
width: 100%;
height: 100%;
border: 1px #000 solid;
border-top: none;
border-right: none;
padding: 0 0 1px;
}
.graf .graf_axes .col{
display: inline-block;
float: left;
margin: 0 15px;
width: 30px;
border: 1px #000 solid;
border-bottom: none;
}
.graf .graf_axes .col1{background: #f00}
.graf .graf_axes .col2{background: #0f0}
.graf .graf_axes .col3{background: #00f}
.graf .graf_axes .col4{background: #f80}
</style>
</head>
<body>
<div class="graf">
<div class="graf_axes">
<div class="col col1" style="height:30%;margin-top:70%;">30%</div>
<div class="col col2" style="height:50%;margin-top:50%;">50%</div>
<div class="col col3" style="height:90%;margin-top:10%;">90%</div>
<div class="col col4" style="height:100%;margin-top:0%;">100%</div>
</div>
</div>
</body>
</html>