Разделение блока по вертикали

@Давран · Регистрация: 24.11.2013

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

Видел много примеров, но не разобрался. есть блок, как его разделить на две части. что бы если первый по высоте меньше второго, до записи второго не вставали под первым(так получается используя float). Главное, что бы левый был прижат к левой стороне, а второй занимал все остальное место

@whiteapps · 20.11.2014, 13:46

Давран, лучше нарисуйте что вы хотите

@Давран · 20.11.2014, 13:59 **[ТС]**

whiteapps, попробую

@Давран · 20.11.2014, 14:03 **[ТС]**

whiteapps,

в общем это блок. В нем два, голубой и синий. Голубой фиксированной ширины и высоты. синий должен заполонять остальную ширину и если он длиннее голубого, то не заходил под него, как то так

@whiteapps · 20.11.2014, 14:23

Давран,

HTML5

<div id="wrap">
    <div id="blue"></div>
    <div id="black">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae enim pretium, maximus ex vel, semper massa. Suspendisse potenti. Sed justo turpis, pulvinar eu dictum ac, rhoncus in metus. Cras sapien sem, blandit vitae ullamcorper sed, dapibus non nibh. Nullam ac arcu mauris. Suspendisse quis tellus fringilla, mollis augue vitae, aliquam ante. Praesent at magna nibh. Ut id viverra enim. Nunc quis enim porttitor, rutrum neque id, posuere nulla.
 
Cras blandit lacinia blandit. In vel vehicula nulla. Quisque volutpat libero elit, non blandit diam mattis vel. Ut lobortis dui in sagittis condimentum. Vivamus non leo felis. Morbi elementum tortor quis mi aliquam, at tempor odio gravida. Etiam pharetra sit amet mauris sed feugiat. Donec nec lobortis arcu. Nam pharetra mi sed sapien euismod lobortis. Morbi pretium turpis nisl, varius tempor tortor maximus at. Duis convallis gravida velit. Duis non posuere tortor. Suspendisse egestas euismod porta. Vestibulum maximus bibendum elit eu luctus. Integer ac est nibh.
 
Vestibulum iaculis tristique mauris, id euismod mauris sodales ut. Suspendisse risus lorem, efficitur in condimentum eget, mattis quis diam. Aliquam elit nisi, laoreet vitae semper nec, venenatis in eros. Vivamus ultrices dapibus ligula a porta. Suspendisse felis nulla, vestibulum in urna et, convallis scelerisque mauris. Nam id est erat. Cras pellentesque luctus urna, vitae hendrerit felis maximus vitae. Sed blandit consequat lectus. Sed eget mattis ligula.
 
Aliquam erat volutpat. Curabitur iaculis metus et mattis rhoncus. Donec nec tincidunt ex. Cras pharetra gravida enim. Vivamus pellentesque rhoncus aliquet. Proin tincidunt imperdiet malesuada. Aenean nisi dui, vulputate nec arcu ac, cursus auctor odio. Fusce ultrices, nunc tempus placerat aliquam, velit lectus mattis purus, quis scelerisque est eros at ligula. Donec posuere auctor sollicitudin. Vivamus finibus ipsum vitae dolor cursus sodales. Nam nec luctus leo. Donec auctor est at maximus pharetra. Proin non ultricies massa, sit amet interdum erat. Fusce augue risus, volutpat pretium viverra in, tincidunt ut libero. Aenean tincidunt, nunc sed ultricies interdum, augue arcu ullamcorper sapien, vitae fermentum est sapien vitae nunc. Nulla facilisi.
 
Vivamus quis congue ex. Ut faucibus nibh mauris, aliquet lobortis purus tincidunt ac. Suspendisse venenatis augue sed felis pharetra, et luctus erat vestibulum. In aliquet, justo quis iaculis commodo, augue justo fringilla libero, quis mattis dolor urna vitae turpis. Integer aliquet dapibus efficitur. Nullam condimentum sit amet erat ac dignissim. Curabitur ultrices arcu erat, eget mollis mauris placerat id. Quisque bibendum nisl blandit sapien molestie, eget hendrerit ante vulputate. Sed ultricies condimentum tincidunt.
    </div>
</div>

CSS

#wrap {
    width:500px;
}
#blue, #black {
float: left;
}
#blue {
    background: none #33f;
    width: 100px;
    height: 200px;
}
#black  {
    background: none #333;
    color: #eee;
    width: calc(100% - 100px);
}

@Давран · 20.11.2014, 14:34 **[ТС]**

whiteapps, спасибо

Добавлено через 7 минут

Сообщение от whiteapps

width: calc(100% - 100px);

эта часть что то не работает

@whiteapps · 20.11.2014, 14:36

Давран, http://jsfiddle.net/ce7esnmr/

@Давран · 20.11.2014, 14:45 **[ТС]**

whiteapps, у вас на примере черный блок стоит под синим

@whiteapps · 20.11.2014, 14:50

Давран, а какой у вас браузер?

@Давран · 20.11.2014, 14:50 **[ТС]**

whiteapps, хром

@whiteapps · 20.11.2014, 14:52

Давран, пробуйте так http://jsfiddle.net/ce7esnmr/2/

а какая версия хрома??

@Давран · 20.11.2014, 15:01 **[ТС]**

whiteapps, Браузер на платформе хрома, этот вот. Версия 17.0.963.46.

Сообщение от whiteapps

пробуйте так

та же петрушка

Добавлено через 1 минуту

Сообщение от whiteapps

какая версия

я ваши примеры и в опере и в мазиле посмотрел, эффект один тоже

@whiteapps · 20.11.2014, 15:15

Давран, тогда так http://jsfiddle.net/ce7esnmr/3/

Не по теме:

а вы знаете, у хрома уже 38 версия вышла
а у этого браузера на основе хромиума как минимум 28
и в последних версиях оперы и фф мой первый пример работает
вы бы обновлялись хоть иногда
одно дело поддерживать хомячков не знающих о том что кроме 7 осла есть что-то еще
и совсем другой когда программист годами не обновляет свои браузеры на основе хромиума

@Давран · 20.11.2014, 15:29 **[ТС]**

Сообщение от whiteapps

одно дело поддерживать хомячков

Какая в общем разница каким браузером пользуюсь. Грош той верстке которая работает только на "новых" браузерах

@whiteapps · 20.11.2014, 15:33

Давран, за последние года 3 не видел ни одного тз, где бы указывались ископаемые файрфоксы и хромы

в худшем случае с 7ие

а уже тем более бред поддерживать двухлетние сборки хромиума, т.к. у нормального хрома вообще-то автообновление стоит, и проблемы некроверстки ни когда не вставало

@Давран · 20.11.2014, 15:35 **[ТС]**

Сообщение от whiteapps

за последние года 3 не видел ни одного тз, где бы указывались ископаемые файрфоксы и хромы

Бывает, ну да ладно. Главное показали, то что нужно мне, а остальное сам как нибудь

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	20.11.2014, 15:01 [ТС]	12
	whiteapps, Браузер на платформе хрома, этот вот. Версия 17.0.963.46. Сообщение от whiteapps пробуйте так та же петрушка Добавлено через 1 минуту Сообщение от whiteapps какая версия я ваши примеры и в опере и в мазиле посмотрел, эффект один тоже 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	20.11.2014, 15:35 [ТС]	16
	Сообщение от whiteapps за последние года 3 не видел ни одного тз, где бы указывались ископаемые файрфоксы и хромы Бывает, ну да ладно. Главное показали, то что нужно мне, а остальное сам как нибудь 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
		1
	Разделение блока по вертикали 20.11.2014, 12:17. Показов 6400. Ответов 15 Метки нет (Все метки) Видел много примеров, но не разобрался. есть блок, как его разделить на две части. что бы если первый по высоте меньше второго, до записи второго не вставали под первым(так получается используя float). Главное, что бы левый был прижат к левой стороне, а второй занимал все остальное место 0

@whiteapps 413 / 378 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	20.11.2014, 13:46	2
	Давран, лучше нарисуйте что вы хотите 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	20.11.2014, 13:59 [ТС]	3
	whiteapps, попробую 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	20.11.2014, 14:03 [ТС]	4
	whiteapps, в общем это блок. В нем два, голубой и синий. Голубой фиксированной ширины и высоты. синий должен заполонять остальную ширину и если он длиннее голубого, то не заходил под него, как то так 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	20.11.2014, 14:34 [ТС]	6
	whiteapps, спасибо Добавлено через 7 минут Сообщение от whiteapps width: calc(100% - 100px); эта часть что то не работает 0

@whiteapps 413 / 378 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	20.11.2014, 14:36	7
	Давран, http://jsfiddle.net/ce7esnmr/ 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	20.11.2014, 14:45 [ТС]	8
	whiteapps, у вас на примере черный блок стоит под синим 0

@whiteapps 413 / 378 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	20.11.2014, 14:50	9
	Давран, а какой у вас браузер? 0

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	20.11.2014, 14:50 [ТС]	10
	whiteapps, хром 0

@whiteapps 413 / 378 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	20.11.2014, 14:52	11
	Давран, пробуйте так http://jsfiddle.net/ce7esnmr/2/ а какая версия хрома?? 0

@whiteapps 413 / 378 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	20.11.2014, 15:15	13
	Давран, тогда так http://jsfiddle.net/ce7esnmr/3/ Не по теме: а вы знаете, у хрома уже 38 версия вышла а у этого браузера на основе хромиума как минимум 28 и в последних версиях оперы и фф мой первый пример работает вы бы обновлялись хоть иногда одно дело поддерживать хомячков не знающих о том что кроме 7 осла есть что-то еще и совсем другой когда программист годами не обновляет свои браузеры на основе хромиума 1

@Давран 203 / 152 / 44 Регистрация: 24.11.2013 Сообщений: 1,106
	20.11.2014, 15:29 [ТС]	14
	Сообщение от whiteapps одно дело поддерживать хомячков Какая в общем разница каким браузером пользуюсь. Грош той верстке которая работает только на "новых" браузерах 0

@whiteapps 413 / 378 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	20.11.2014, 15:33	15
	Давран, за последние года 3 не видел ни одного тз, где бы указывались ископаемые файрфоксы и хромы в худшем случае с 7ие а уже тем более бред поддерживать двухлетние сборки хромиума, т.к. у нормального хрома вообще-то автообновление стоит, и проблемы некроверстки ни когда не вставало 0