Разобраться с %

[borus]

Здравствуйте!

Накидал рыбу сайта для 3-х колонок использовал width:33.3% Добавил border, padding в них. В итоге последняя колонка не поместилась и встала ниже первых.

Скажите, есть такой способ, чтобы указывать ширину в %-ах, прописывать нужные border, padding, margin и в итоге получать все три колонки в одной строке? например, решение, при котором ширина содержимого diva рассчитывалась автоматически после учёта вышеотмеченных параметров.

[sammasati]

Как вариант - сделать врапперы длинной 33.3% для каждой колонки. Внутри такого враппера блок растягивается на 100% и все отступы уже рассчитываются относительно враппера.

Что-то вроде этого:

<div id="content">
        <h1>Приветствуем Вас!</h1>
        <p>Наша студия рада предложить Вам свои услуги в области ...</p>
        <div class="wrapper left">
        <div id="column1">
        	<h3>Аэрография</h3>
            <p>большой пребольшой текст на всю ширину колонки идет и продолжается сколько надо</p>
        </div>
        </div>
      <div class="wrapper right">
        <div id="column3">
        	<h3>Реставрация</h3>
            <p>большой пребольшой текст на всю ширину колонки идет и продолжается сколько надо</p>
        </div>
        </div>
       <div class="wrapper">
        <div id="column2">
        	<h3>Татуировки</h3>
            <p>большой пребольшой текст на всю ширину колонки идет и продолжается сколько надо</p>
        </div>
        </div>

    </div>

.wrapper {
width: 33.3%;
}
.left {
float: left;
}
.right {
float: right;
}

P.S. и контенту добавьте overflow: hidden

[Noodles]

Дело в том что только Firefox может корректно работать с дробными числами.

Другие бразуеры округляют проценты(обычно в большую сторону) соответственно когда вы размещаете 3 блока по 33.3% браузер сначала округляет их до 34% и после этого выводит отсюда 3 блока у вас занимают 102%

Для того чтобы прописывать padding и border нужно каждую колонну обернуть в еще один блок с шириной 33.3% а текущему блок в котором размещается контент убрать width чтобы он по умолчанию занимал всю ширину родительского блока и спокойно задавать padding и border так как он уже будет находиться внутри блока с шириной 33.3%

Для размещения блоков на одной линии

1) поставить всем float: left например;

2) обернуть 3 блока в 1 родительский и задать ему overflow:hidden

на самом деле есть много разных способов, мне на ум приходит еще 3 как минимум а их наверняка еще больше

[SelenIT]

Дело в том что только Firefox может корректно работать с дробными числами.

Другие бразуеры округляют проценты(обычно в большую сторону) соответственно когда вы размещаете 3 блока по 33.3% браузер сначала округляет их до 34% и после этого выводит отсюда 3 блока у вас занимают 102%

Не совсем верно. На самом деле только Опера не понимает дробных процентов для ширины, но округляет она "вниз" (тупо отбрасывает дробную часть). Но в IE7 иногда сумма, например, 50%+50% оказывается всего на пиксель больше, чем надо. Чаще всего лечится clear:right для блока, идущего перед блоком с float:left (и симметрично), реже приходится менять 50% на 49.99% и т.п. С конкретно 33.3% проблем быть не должно, тут сумма и так меньше 100.

решение, при котором ширина содержимого diva рассчитывалась автоматически после учёта вышеотмеченных параметров

Существует для новых браузеров и IE8+. В старых IE так работает ширина в Quirks Mode (режиме эмуляции IE5 со всеми его глюками), но это неприемлемое "решение". Поэтому, если старые IE важны, то пока - только вложенные обертки, увы...