Верстальщикус

Благодарю

Всем привет. Никогда не верстал таблицами - возникла потребность их использования в резиновой верстке. В блоке с контентом, который тянется от 1000 до 1200 располагается таблица - цель создать 3 резиновых текстовых блока со строго фиксированными отступами между ними. Вот какой на данный момент выходит код: <table> <tr> <td class="block"> </td> <td class="margin"> </td> <td class="block"> </td> <td class="margin"> </td> <td class="block"> </td> </tr> </table> table {width:100%; height:50px; border-collapse:collapse;} td.margin {width:40px; background:#000;} td.block {background:#fff;} Но проблема в том, что работает сие добро только при условии, что в резиновых ячейках не будет текста или будет равное количество одинаковых букв - иначе все разъезжается, как таблице угодно. Товарищи, мастера в делах табличных, подскажите мне пожалуйста, как можно решить поставленную задачу - чтобы текст не влиял на ширину ячейки и переносился доходя до края. Благодарю за внимание и очень надеюсь на вашу помощь.

С отступом была другая ситуация, было 4 ячейки и 4 блока в них, выравнивание блока по левому краю - у последней ячейки остается пространство справа. А вот, когда я пытался сделать как в вашем примере - 4 ячейки для блоков и 3 для отступов между ними - я сильно протупил - бревно я в табличной верстке - указал ширину ячеек-отступов в процентах - посему происходило то, что можно увидеть в третьем изображении - тянулись ячеки-блоки, у которых казалось бы была фиксированная ширина. В вашем примере для ячеек-отступов просто не нужно указывать ширину и тогда все работает как надо... Softlink, большое вам спасибо! Как раз возникла ситуация, когда нужно добиться обратного эффекта - т.е. чтобы тянулись блоки, а отступы оставались неизменными. Вы мне очень помогли. Кстати, обратного эффекта, судя по всему, также можно добиться с помощью блочной вертски, нашел интересный пример: http://agat.in/samples/grid-sample/ - попробую реализовать по примеру, если что-то не получится - таблицы рулят (конечно же исходя из ситуации удобнее сие реализовать табицами, но упертых заказчиков никто не отменял)

Решение суперское - все работает отлично, причем блокам можно задавать разную ширину. Как я понимаю все работает на основе display:inline-block; и text-align:justify, который выравнивает inline элементы. Вот, что сделано на основе предоставленного мне примера: <div class="banners"> <div class="banner"></div> <div class="banner"></div> <div class="banner"></div> <div class="banner"></div> <span class="banners-w"></span> </div> .banners { height: 94px; text-align: justify; text-justify: newspaper; font-size: 0; line-height: 0; } .banner { display: inline-block; vertical-align: top; width: 232px; height: 94px; background:#000; color:#fff; } .banners-w { width: 100%; display: inline-block; } html* .banner, html* .banners-w { display: inline; zoom: 1; } Если вдруг будут еще примеры решения задачи, даже с теми же таблицами - буду благодарен, возможно не только я - так сказать для общего развития. Спасибо пользователю, mishka

Попробовал, сначала обрадовался, т.к. при максимальной ширине все было хорошо, и отступы резинились при уменьшении экрана. Но на подступе к минимальной ширине появляется горизонтальная полоса прокрутки, но не в этом беда - последний блок урезается на одну треть. С радостью, уже стучу.

Здравствуйте. Я не первый день занимаюсь версткой, но опыта работы с резиной у меня совсем мало. Работодатель настаивал, чтобы я научился верстать резину и скинул мне макет. В процессе работы возникла задача, которая ставит меня в тупик. В блоке с контентом есть 4 блока, пусть это будут баннеры, которым заданы определенные ширина и высота – по мере растяжения окна браузера должны растягиваться отступы между баннерами, а у самих баннеров ширина должна оставаться неизменной. Для наглядности прошу взглянуть на изображение: У меня получилось реализовать нечто приближенное с помощью таблиц (предпочитаю блочную верстку, но здесь главное, чтобы работало...): Вставил таблицу, задал ей ширину 100%, использовал 4 ячейки и в них добавил блок div с нужной шириной. Все супер, только вот естественно справа образуется не нужный отступ (если блок div отцентрировать относительно ячейки, то отступы будут слева и справа - а все должно быть впритык по краям), изображение для наглядности: Потом еще попробовал отдельно для блоков и отступов создать по ячейке - ячейкам-блокам задать необходимую ширину а ячейка-отступам ширину в процентном соотношении. Я исходил от минимальной ширины, при 1000 пикс - все хорошо, а по мере увеличения ширины окна браузера ячейки-отступы тянутся совсем чуточку, больше тянутся ячейки-блоки с фиксированной шириной... изображение: Спасибо за внимание. Очень надеюсь на вашу помощь... Буду благодарен за любую подсказку по этому вопросу…