VPF::Позиционирование при резиновой верске

Pitbul

Дата 18.9.2010, 20:36 (ссылка)

(нет голосов)

Загрузка ...

Fruzenshtein

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет

Добрый день столкнулся с такой проблемкой, как резиновая верстка. Задача такова:
Есть 3 блока:
- Контейнер
- Левый
- Правый

Контейнер играет роль объединяющего. У Левого блока ширина 200 пикселей. Правый должен занимать все оставшееся место от левого справа и ни в коем случае не сползать под Левый блок.

Для иллюстрации показываю, что уже написал:

Код


body {margin: 0; padding: 0; text-align: center;}
    #conteiner {
        width: 100%;
        background-color: #6699FF;
        min-width: 1024px;
        text-align: left;
    }
    #left {
        width: 200px;
        background-color: #FFCCFF;
        text-align: left;
    }
    #right {
        width: 100%;
        background-color: #FFFFCC;
        text-align: left;
    }

Код


<div id="conteiner">

    <div id="left">Текст для левой колонки. Текст для левой колонки. Текст для левой колонки. Текст для левой колонки. Текст для левой колонки. Текст для левой колонки. Текст для левой колонки. Текст для левой колонки. Текст для левой колонки. <br>
    Текст для левой колонки. Текст для левой колонки. Текст для левой колонки. Текст для левой колонки. </div>

    <div id="right">Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. <br>
    Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. <br>
    Информация из правой колонки. Информация из правой колонки. Информация из правой колонки. </div>

</div>

Помогите мне пожалуйста с подсказкой, какие CSS свойства еще необходимо присвоить БЛОКам или может быть надо ввести вспомогательные элементы на страницу. smile

--------------------

### JAVA ###### programming ###

prom2332

Дата 19.9.2010, 01:27 (ссылка)

(голосов:1)

Загрузка ...

веб-мастер

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 26.8.2010
Где: Москва

Репутация: нет
Всего: нет

Код


body {margin: 0; padding: 0;}
#conteiner {
    width: 100%;
    background-color: #6699FF;
    min-width: 1024px;
}
#left {
    width: 200px;
    background-color: #FFCCFF;
    float:left;
}
#right {
    width: 100%;
    background-color: #FFFFCC;
}

Код


<div id="conteiner">
    <div id="left">Текст для левой колонки. Текст для левой колонки. Текст для левой колонки. Текст для левой колонки. </div>
    <div id="right">Какой-то текст для правой колонки. 
    Какой-то текст для правой колонки. 
    Какой-то текст для правой колонки. 
    Какой-то текст для правой колонки. 
    Какой-то текст для правой колонки. 
    Какой-то текст для правой колонки. 
    Какой-то текст для правой колонки. 
    Какой-то текст для правой колонки. 
    Какой-то текст для правой колонки. 
    Какой-то текст для правой колонки. 
    </div>
</div>

Читайте про float

Это сообщение отредактировал(а) prom2332 - 19.9.2010, 01:34

Pitbul

Дата 19.9.2010, 09:57 (ссылка)

(нет голосов)

Загрузка ...

Fruzenshtein

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет

prom2332

Данные CSS свойства не дали нужного результата. Я уже пробовал разные комбинации float'ов присваивать ЛЕВОМУ и ПРАВОМУ блокам smile

, но увы правый блок не хочет занимать все оставшееся место справа от ЛЕВОГО.

Добавлено через 2 минуты и 43 секунды
Проблематика в том, что у ПРАВОГО блока задана ширина 100%, если она была бы меньше или равна свободному месту, то все бы стало правильно

--------------------

### JAVA ###### programming ###

prom2332

Дата 19.9.2010, 11:31 (ссылка)

(нет голосов)

Загрузка ...

веб-мастер

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 26.8.2010
Где: Москва

Репутация: нет
Всего: нет

Да точно, проблема возникает в 6 и 7 IE, поправлю отпишу.

prom2332

Дата 19.9.2010, 11:46 (ссылка)

(голосов:1)

Загрузка ...

веб-мастер

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 26.8.2010
Где: Москва

Репутация: нет
Всего: нет

Как вариант просто убиваем 100% ширину у правого блока и он автоматически выстроится во весь экран кроссбраузерно, также ставим margin-left:200px; для того, чтобы куча текста не переваливало на левый блок.

Код


#conteiner {
    width: 100%;
    background-color: #6699FF;
    min-width: 1024px;
}
#left {
    width: 200px;
    background-color: #FFCCFF;
    float:left;
}
#right {
    background-color: #FFFFCC;
    margin-left:200px;
}

Pitbul

Дата 19.9.2010, 12:00 (ссылка)

(нет голосов)

Загрузка ...

Fruzenshtein

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет

prom2332

Так вышло гораздо лучше. smile

Буду пробовать верстать дальше свою задумку. Посмотрим, как будет себя вести ПРАВЫЙ блок, когда в дочерних элементах надо будет выставлять свойства overflow и float. Обычно начинаются какие-то фокусы при таких вложениях smile

А так спасибо smile

--------------------

### JAVA ###### programming ###

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »