Как сверстать 2 блока?

Mr_Diza · 24.06.2011

Писал на Mail.Ru (в ответах), но там никто так и не смог нормально вразумить. Кину вам сюда переписку, может вы мне поможете?!

Код:
Здравствуйте, дорогие верстальщики! Собственно, вопрос в заголовке я уже задал, теперь опишу его суть.

Есть контейнер - <div id="main">

Код:

#main { width: 90%; margin: 0 auto; background-color: #000000 }

В нём блок контента - <div id="content">

Код:

#content { max-width: 700px; float: left; margin-bottom: 50px; padding: 10px; background-color: #FFFFFF }

И блок навигации - <div id="navbar">

Код:

#navbar { max-width: 350px; float: right; margin-bottom: 50px; padding: 10px; background-color: #FFFFFF }

---------------------------------------------------------------
Блок контента (при изменении размеров браузера) меняется соответсвующим образом прямо пропорционально размерам web-браузера.
---------------------------------------------------------------

А вот следующий за ним блок навигации, ведёт себя не совсем корректно. Ширина этого блока остаётся неизменной и при сужении web-браузера, он просто падает вниз согласно заданному ему параметру float: right и в момент сужения просто перетикает в левую сторону, в то время как блок контента на глазах меняет своё расширение.

Вопрос:
-----------
Как сделать так чтоб оба блока вели себя одинаково и занимали всю долю экрана (свободное пространство). Чтоб при сужении экрана и при достижении min-width: XXpx; у блока контента и навигации, блок навигации падал вниз занимая там должную ширину экрана (всё оставшееся пространство)? Да и хочется чтоб в оригинальном расширении (к примеру 1280X800 или 1024X768) сохранилась такая стилизация [ лево - право margin: 0 (либо 10px либо 10%), а между блоками либо определённый процент (меленький), либо к примеру 15px ].

Думаю что объяснил всё правильно и очень сильно надеюсь на вашу помощь.
Добавлено 17 минут назад
попробуй max-width сделать в % в обоих дивах
-------------------------------------------------------------------
Пробовал. Что только не перепробовал, не помогает
Такое ощущение что эти блоки как 2 отдельных государства
и живут своей жизнью, и если первый (контент) хоть как-то
потдаётся проводимым над ним эксперементам,
то блок навигации ну вообще по странному себя ведёт :\

К примеру если поставить max-width: в процентах и там и там,
то контент растянется согласно ширине и родителю, а ширина навигации
остаётся согласно длинне вставленному в неё тексту

Я вообще себе всю голову уже сломал как этот элемент объиграть.

x-encoder · 25.06.2011

попробуй CSS фреймворк 960 Grid System. Там есть резиновый вариант. На этом сайте http://960.gs/ можешь сгенерировать нужный фреймворк

motek · 25.06.2011

Mr_Diza сказал(а):
Я вообще себе всю голову уже сломал как этот элемент объиграть.

Попробуйте блоку <div id="main"> задать минимальную ширину и скролл по горизонтали,если эту ширину перешли...
например:

Код:

 <!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<style>
			#main 
			{ 
				width: 90%;
				min-width: 1095px;
				overflow-x: auto;
				margin: 0 auto; 
				background-color: #000000; 
			}
			#content 
			{ 
				max-width: 700px;
				float: left; 
				margin-bottom: 50px; 
				padding: 10px; 
				background-color: #FFFFFF; 
			}
			#navbar 
			{ 
				max-width: 350px;
				overflow: hidden;
				display: block;
				float: right; 
				margin-bottom: 50px; 
				padding: 10px; 
				background-color: #FFFFFF; 
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare nibh blandit dui sodales posuere. Vestibulum non sapien massa nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare nibh blandit dui sodales posuere. Vestibulum non sapien massa nuncLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare nibh blandit dui sodales posuere. Vestibulum non sapien massa nunc..</div>
			<div id="navbar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare nibh blandit dui sodales posuere. Vestibulum non sapien massa nunc.</div>
		</div>
	</body>
</html>

Как сверстать 2 блока?

Mr_Diza

Новичок

x-encoder

Well-Known Member

motek

злой как @

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей