НЕ могу расставить SideBar слева/cправа контанта. - HTML и CSS

laketych · 21.02.2016, 11:39

Добрый день. Подскажите как рассположить Sidebar с левой стороны и с правой стороны. по центру находиться Content. Прописал float справа, по центру и слева - но что-то никако ничего не получаеться.

Код HTML:

div#content{
	width:601px;
	height:509px;
	outline:1px solid #0000CD;
	margin-left:280px;
	float:center;
}

div#sidebar_LEFT{
	width:212px;
	height:509px;
	outline:1px solid #cc0000;
	float:left;
}

div#sidebar_sidebar_RIGHT{
	width:212px;
	height:509px;
	outline:1px solid #cc0000;
	float:right;

}

Naive · 21.02.2016, 13:17

Цитата:

float:center;

Ну на лицо непонимание механизмов работы плавающих элементов. Кури матчасть. Есть хороший разбор на хабре, есть лекции по поводу у яндекса и WebStandartDays.

marina krasa · 21.02.2016, 13:19

Код HTML:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
	#wrapper {
	width: 800px;
	//background-color:red;
}

#left {
	width: 200px;
	float: left;
	border: 1px solid blue;
	height: 500px;
}

#right {
	width: 200px;
	float: right;
	border: 1px solid blue;
	height: 500px;
}

#center {
	width: 380px;
	background-color: green;
	margin:0 auto;
	height: 500px;
}

#clear {
clear: both;
}

	</style>
	
	</head>
<body>
	
	<div id="wrapper">
		<div id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, non?</div>
		<div id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, et?</div>
		<div id="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ad.</div>
		<div id="clear"></div>
	</div>

	
</body>
</html>

Вадим Мошев · 21.02.2016, 15:05

У свойства float нет значения center. У него есть только три значения: left, right и none. Последнее значение отменяет обтекание.

Вообще, чтобы выполнять подобное размещение элементов, рекомендуется поступать так.
1. разместить левый блок (float: left)
2. разместить правый блок (float: right)
3. Разместить центральный блок (без float или, если обтекание было установлено ранее и его надо отменить, то float: none, а также со отступом от левого края (margin-left) на расстояние, обеспечивающее нормальное отображение всех трёх блоков, хотя можно поступить так же, как это вы сделали - разместить центральный блок по середине враппера путём margin: 0 auto).
4. Все трём блокам задать ширину.

ProBeginner · 22.02.2016, 04:45

Если не побрезгуете, используйте табличный дизайн сайта. Отсутствие головной боли - гарантирую.

Про float: center, уже вроде помянули

И на мой взгляд, у вас неверная концепция разметки. Сайд-бары д.б. блоками которые находятся в том же (родительском) блоке, что и основное содержание и не должны иметь отдельный селектор с правилами. Если основное содержание имеет отдельный блок, то можете всем трём блокам приписать float: left.

Naive · 22.02.2016, 18:23

Цитата:

табличный дизайн сайта

Херни не советуй. Особенно из 90х годов. Есть правильные методы для трехколоночной верстки; есть хаки, которые правильней, чем таблица, но не совсем то.
Уходим в сторону семантики, не слушаем дятлов.

proinfotech · 23.02.2016, 01:52

Код HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			.wrapper {width: 960px;	height: 500px; margin:0 auto;}
			.wrapper > div {box-sizing:border-box; display:inline-block; vertical-align:top; height: inherit; padding:10px;}
			.left {width: 250px; border: 1px solid #c00;}
			.right {width: 250px; border: 1px solid #c00;}
			.center {width: 460px; border: 1px solid #000;}
		</style>
	</head>
	<body>
		<div class="wrapper"><div class="left">Left</div><div class="center">Center</div><div class="right">Right</div></div>
	</body>
</html>

21.02.2016, 11:39	#1
laketych Пользователь Регистрация: 22.12.2015 Сообщений: 37	НЕ могу расставить SideBar слева/cправа контанта. Добрый день. Подскажите как рассположить Sidebar с левой стороны и с правой стороны. по центру находиться Content. Прописал float справа, по центру и слева - но что-то никако ничего не получаеться. Код HTML: div#content{ width:601px; height:509px; outline:1px solid #0000CD; margin-left:280px; float:center; } div#sidebar_LEFT{ width:212px; height:509px; outline:1px solid #cc0000; float:left; } div#sidebar_sidebar_RIGHT{ width:212px; height:509px; outline:1px solid #cc0000; float:right; }

22.02.2016, 04:45	#5
ProBeginner Форумчанин Регистрация: 22.02.2016 Сообщений: 145	Табличный дизайн сайта Если не побрезгуете, используйте табличный дизайн сайта. Отсутствие головной боли - гарантирую. Про float: center, уже вроде помянули И на мой взгляд, у вас неверная концепция разметки. Сайд-бары д.б. блоками которые находятся в том же (родительском) блоке, что и основное содержание и не должны иметь отдельный селектор с правилами. Если основное содержание имеет отдельный блок, то можете всем трём блокам приписать float: left. Возьму в кредит мильён по 100% годовых на сто лет.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Форма как SideBar или systray Windows	DIMASIKXXX32	Общие вопросы Delphi	19	21.11.2012 03:25
Почти Vista SideBar всего 21 kb	kachkarvv	Софт	4	26.01.2012 22:25
С++ гаджет для Windows SideBar	PavelGord	Общие вопросы C/C++	0	20.02.2011 21:57
Расставить пробелы	dukesoteg	Помощь студентам	0	10.06.2010 18:30
сдвигается sidebar в ie6	coolerS	HTML и CSS	0	12.12.2009 15:22

21.02.2016, 15:05	#4
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	У свойства float нет значения center. У него есть только три значения: left, right и none. Последнее значение отменяет обтекание. Вообще, чтобы выполнять подобное размещение элементов, рекомендуется поступать так. 1. разместить левый блок (float: left) 2. разместить правый блок (float: right) 3. Разместить центральный блок (без float или, если обтекание было установлено ранее и его надо отменить, то float: none, а также со отступом от левого края (margin-left) на расстояние, обеспечивающее нормальное отображение всех трёх блоков, хотя можно поступить так же, как это вы сделали - разместить центральный блок по середине враппера путём margin: 0 auto). 4. Все трём блокам задать ширину.