Проблемы в резиновой верстке

@shtopor20 · Регистрация: 21.05.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте. У меня простейшая резиновая верстка съезжает. Что делать?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.q{
    float: left;
    width: 300px;
    background: #fff000;
}
 
.f{
    float: left;
    width: 100%;
    min-width: 300px;
    max-width: 800px;
    background: #ff0000;
}
 
</style>
<div class="q" >
Меню
</div>
<div class="f" >
Контент
</div>

@etalord · 05.04.2013, 10:15

Резиновая верстка так не делается. У вас у .f блока ширина в 100%, ему не хватает места и он "спрыгивает". Переверстайте другим способом.

@shtopor20 · 05.04.2013, 10:18 **[ТС]**

ну по этому я и задал max и min. Чтобы было пространство для изменения размеров. Я это по статье делал. Как тогда по другому?

@etalord · 05.04.2013, 10:31

не заметил min-width и max-width )) Но сути это не меняет. Покажите статью

@shtopor20 · 05.04.2013, 10:35 **[ТС]**

я ее сейчас сам не могу найти) Но я точно помню что там были max и min чтобы указать размеры и width: 100% чтобы растянуть блок. В остальных статьях пишут только о верстке в процентах, а про фиксированные размеры ничего.

@etalord · 05.04.2013, 10:38

Может пойти другим путём?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
#wrap {min-width: 600px}
.q{
    float: left;
    width: 300px;
    background: #fff000;
}
 
.f{
    max-width: 800px;
    margin-left: 300px;
    background: #ff0000;
}
 
</style>
<div id="wrap">
    <div class="q" >
    Меню
    </div>
    <div class="f" >
    Контент
    </div>
</div>

Правда ослик до 10 версии тупит, тянет до бесконечности.

@maximus2011 · 05.04.2013, 10:40

www.csstemplater.com

@shtopor20 · 05.04.2013, 10:46 **[ТС]**

если контент сделать во всю ширину, то фон уедет, а текст останется.

Добавлено через 3 минуты
Вау, очень удобный сайт

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@etalord работяга 368 / 368 / 52 Регистрация: 23.05.2010 Сообщений: 947
	05.04.2013, 10:15
	Резиновая верстка так не делается. У вас у .f блока ширина в 100%, ему не хватает места и он "спрыгивает". Переверстайте другим способом. 0

@shtopor20 47 / 36 / 0 Регистрация: 21.05.2010 Сообщений: 301
	05.04.2013, 10:18 [ТС]
	ну по этому я и задал max и min. Чтобы было пространство для изменения размеров. Я это по статье делал. Как тогда по другому? 0

@etalord работяга 368 / 368 / 52 Регистрация: 23.05.2010 Сообщений: 947
	05.04.2013, 10:31
	не заметил min-width и max-width )) Но сути это не меняет. Покажите статью 0

@shtopor20 47 / 36 / 0 Регистрация: 21.05.2010 Сообщений: 301
	05.04.2013, 10:35 [ТС]
	я ее сейчас сам не могу найти) Но я точно помню что там были max и min чтобы указать размеры и width: 100% чтобы растянуть блок. В остальных статьях пишут только о верстке в процентах, а про фиксированные размеры ничего. 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	05.04.2013, 10:40
	www.csstemplater.com 1

@shtopor20 47 / 36 / 0 Регистрация: 21.05.2010 Сообщений: 301
	05.04.2013, 10:46 [ТС]
	если контент сделать во всю ширину, то фон уедет, а текст останется. Добавлено через 3 минуты Вау, очень удобный сайт 0