Не могу сделать дивы друг за другом

@dzhigurda · Регистрация: 07.05.2013

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

Практикуюсь немного в css, пытаюсь сделать клон Рамблера в старом дизайне. Не могу создать такой бар:

Решил сделать его из трех дивов, следующих друг за другом: первый это главное меню, второй - мобильная версия, третий - регистрация.
Подсветил их цветом для наглядности, вот, что у меня получается:

Кода смысла тут нет приводить, там все просто:
желтый div - float:left
красный div - float:right
зеленый - clear:both
Хочу, чтобы зеленый встал между ними, но почему-то получается билеберда как на скрине.

@Mainstand · 18.01.2015, 23:11

Зеленому блоку задать margin слева и справа на ширину зеленого и красного блока соотвественно.
Или
Всем трем блокам присвоить float:left;

@dzhigurda · 18.01.2015, 23:15 **[ТС]**

Mainstand, Я хочу чтобы желтый и красный блоки имели width:auto, а зеленый занимал все отсавшееся пространство между ними

@Mainstand · 19.01.2015, 00:12

dzhigurda, принцип такой - http://jsfiddle.net/gpfvcLn3/

Добавлено через 17 минут
Вот пример резиновой верстки - http://jsfiddle.net/gpfvcLn3/1/

@dzhigurda · 19.01.2015, 00:16 **[ТС]**

Mainstand, да это все прекрасно понятно, когда есть установленная ширина, а как такое сделать с шириной auto? Я просто хочу, чтобы этот блок подстраивался под свободное пространство автоматически, а остальные блоки имели ширину по контенту, а не заданную вручную ширину.

@Al_lord · 19.01.2015, 01:36

хм... если че, громко не ржать ....

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 .right
 {
    float: right;
    width: 50%;
 }
 .left{
    float: left;
    width: 50%
 }
 .clr
 {
    clear: both;
 }
 .red{
    background:#f00;
 }
 .green
 {
    background:#0f0; 
 }
 .yellow
 {
    background: #ff0;
 }
 .correct
 {
    width: 33%
 }
 .correct2
 {
    width: 67%;
 }
 div
 {
    height: 30px;
 }

HTML5
1
2
3
4
5
6
7
8
9
<div class="dv1">
    <div class="dv11l left yellow correct"></div>
    <div class="dv12r right  ">
        <div class="dv121l left green"></div>
        <div class="dv122r right red"></div>
        <div class="clr"></div>
    </div>
    <div class="clr"></div>
</div>

@Mainstand · 19.01.2015, 01:43

Al_lord, и все равно они получаются резиновыми, изменяются вне зависимости от контента.
Что-то мне подсказывает, что здесь надо над таблицами колдовать, а не над блоками.
И вообще, обычно в верстке в 3 колонки, как минимум 2 блока делают фиксированной ширины.

@Sabio · 19.01.2015, 10:38

Над спеками тут надо колдовать, чтобы не задавать clear:both; где не надо, и правильно строить структуру html.

Задавайте отступы в процентах.

Новые блоги и статьи Все статьи Все блоги /
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .
wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .

@dzhigurda 2 / 2 / 0 Регистрация: 07.05.2013 Сообщений: 90

	Не могу сделать дивы друг за другом 18.01.2015, 22:58. Показов 2917. Ответов 7 Метки нет (Все метки) Практикуюсь немного в css, пытаюсь сделать клон Рамблера в старом дизайне. Не могу создать такой бар: Решил сделать его из трех дивов, следующих друг за другом: первый это главное меню, второй - мобильная версия, третий - регистрация. Подсветил их цветом для наглядности, вот, что у меня получается: Кода смысла тут нет приводить, там все просто: желтый div - float:left красный div - float:right зеленый - clear:both Хочу, чтобы зеленый встал между ними, но почему-то получается билеберда как на скрине. 0

@Mainstand 41 / 41 / 21 Регистрация: 11.01.2015 Сообщений: 143
	18.01.2015, 23:11
	Зеленому блоку задать margin слева и справа на ширину зеленого и красного блока соотвественно. Или Всем трем блокам присвоить float:left; 0

@dzhigurda 2 / 2 / 0 Регистрация: 07.05.2013 Сообщений: 90
	18.01.2015, 23:15 [ТС]
	Mainstand, Я хочу чтобы желтый и красный блоки имели width:auto, а зеленый занимал все отсавшееся пространство между ними 0

@Mainstand 41 / 41 / 21 Регистрация: 11.01.2015 Сообщений: 143
	19.01.2015, 00:12
	dzhigurda, принцип такой - http://jsfiddle.net/gpfvcLn3/ Добавлено через 17 минут Вот пример резиновой верстки - http://jsfiddle.net/gpfvcLn3/1/ 0

@dzhigurda 2 / 2 / 0 Регистрация: 07.05.2013 Сообщений: 90
	19.01.2015, 00:16 [ТС]
	Mainstand, да это все прекрасно понятно, когда есть установленная ширина, а как такое сделать с шириной auto? Я просто хочу, чтобы этот блок подстраивался под свободное пространство автоматически, а остальные блоки имели ширину по контенту, а не заданную вручную ширину. 0

@Mainstand 41 / 41 / 21 Регистрация: 11.01.2015 Сообщений: 143
	19.01.2015, 01:43
	Al_lord, и все равно они получаются резиновыми, изменяются вне зависимости от контента. Что-то мне подсказывает, что здесь надо над таблицами колдовать, а не над блоками. И вообще, обычно в верстке в 3 колонки, как минимум 2 блока делают фиксированной ширины. 0

@Sabio 57 / 57 / 14 Регистрация: 24.06.2013 Сообщений: 265
	19.01.2015, 10:38
	Над спеками тут надо колдовать, чтобы не задавать clear:both; где не надо, и правильно строить структуру html. Задавайте отступы в процентах. 0