Вёрстка « Позиционирование колонок с данными на DIV`ах

Вот, к примеру у меня есть такая структура сайта:

как мне сделать так, чтобы блок .content = 80% ширины всего окна, а .sidebar = 20% при этом нужно сделать еще и отступы, бордеры и другие примочки.

Если я делаю так:

.content {
  width: 80%;
  float: left;
}

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

то вроде все нормально, но если добавить margin-left к .content = 10px, то уже придется менять процентную меру в блоках(к примеру, на, 78% к 20%), чтобы ничего не разъезжалось. Мне кажется, что это не самое лучшее решение проблемы. Можно ли как-то по другому задать относительную ширину для двух DIV`ов, так чтобы учитывались отступы, бордеры и прочее?

Заранее благодарен.

1 ответов


Ромчик, посмотри как Сергей Чикуёнок сверстал Две float-колонки одинаковой высоты, может тебе подойдет, всякие маржины и падинги можно задавать блокам класа content.
Думаю не нужно рьяно гнаться за минимальностью елементов, главное чтобы верстка не расползалась с полпинка.


Если вас не интересует поддержка IE7, вы просто можете использовать другую боксовую модель, в которой конечная величина ширины будет включать в себя и непосредственно ширину элемента, и его border'ы с padding'ами.


.content,
.sidebar {
    box-sizing: border-box;
    }
 

http://caniuse.com/#search=box-sizing

Если же поддержка IE7 вам важна, то либо рассчитывайте конечную ширину элементов как сумму непосредственно их ширин, бордеров и паддингов. Например, так:


.content {
    float: left;
    width: 76%;
    padding: 0 2%;
    }
.sidebar {
    float: right;
    width: 16%;
    padding: 0 2%;
    }
 

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

можно сделать так ->


.content,.sidebar {
display:inline-block;
}
.content {
  width: 80%;
 }

.sidebar {
  width: 20%;
 }