css два блока внутри одного - есть ответ

stam_nik, 317 просмотров

как растянуть по ширине два дочерних блока так,что-бы оба занимали ровно по 50% от родительского....???
Я сделал это так:
.category_description < - родительский
{
border:1px solid red;
width:100%;
overflow:hidden;
position:relative;
right:2px;
}

.category_attributes <- дочерний 1
{
border:1px solid black;
float:left;
width:50%;
}

.category_filters <- дочерний 2
{
border:1px solid black;
float:right;
width:50%;
}
но в результате "дочерний 2" выводится ниже 1го,а нужно расположить их рядом - один возле другого!!
Как это сделать??
Спасибо!!

Примечание:
momentum,это я понял,но как это решить?!

Примечание:
momentum,и рамка нужна,и растянуть тоже нужно!!

Ответы:

romani4

Проблема известная. Выходов несколько:
1. У дочерних указать:
box-sizing: border-box;
Сработает в новых браузерах (IE8.0+, Opera7.0+, Chrome10.0+, FF -moz-box-sizing).
Гуглите инфу по box-sizing.

romani4

Примеры в ссылке.

AdmGelax

Попробуйте использовать вместо float:left\right -> display:table-cell

romani4

float:left vs display:table-cell -- это вечный холивар.
Я вижу 1 существенный недостаток второго: оно не адаптивно.
Если сайт открыть с телефона, то блок не перенесется как у флоата, а сожмется.

romani4

Более наглядно:

11 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.