Div aside и float:left/right - HTML и CSS

Smogg · 29.07.2014, 22:14

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	.d1 {
	float:left 65%;
	color:#03F;
	}
	.a1 {
	float:right 35%;	
	color:#0F0;}
	
</style>
</head>

<body>

<div>
	<div class="d1">
	sdafsdfasf
	</div>

	<aside class="a1">
	sdfsafadf
	</aside>
</div>
</body>
</html>

Вот есть такая глупость: внешний Div, внутри которого есть другой div и еще aside. Я хочу думать, что два внутренних элемента флоатятся относительно внешнего diva. Но они ваще никак никуда... идут сверху вниз друг за другом.
Почто же?

Smogg · 29.07.2014, 22:24

Гык) А, собсно, с чего это мне привиделось, что ширину нужно указывать тут же, в объявлении float'a?

Код:

.d1 {
	float:left;
	width:65%;
	color:#03F;
	}

Smogg · 29.07.2014, 22:36

Ага, блин... рано обрадовался...

Цитата:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
#dout{
border:#C3C thin solid;
}
.d1 {
float:left;
width: 65%;
color:#03F;
}
.a1 {
float:right;
width: 35%;
color:#0F0;}

</style>
</head>

<body>

<div id="dout">
<div class="d1">
sdafsdfasf
</div>
<aside class="a1">

sdfsafadf

</aside>

</div>
</body>
</html>

Граница внешнего дива - узынькая палосачка в две пиксели, которая по задумке должна обхватывать внутренние элементы.
Почему же нет?

Smogg · 29.07.2014, 22:53

Значит, с флоутом элемент выпадает из потока...

Тогда какие еще возможные варианты разбиения на пять классических частей:
[____________шапка_______________]
[лев.панель] [КОНТЕНТ] [прав.панель]
[___________подвал_______________]

кроме таблицы и глюкавых флоутов? А то я где-то читал, что в верстке использовать таблицы - прошлый век.

подскажите, плиз)

Praid30 · 12.09.2014, 14:14

Получилось справится с проблемой по флотам ?

Naive · 17.09.2014, 16:55

Флоаты не глюковые, это вы их готовить не умеете. На данный момент, плавающие элементы - основной метод колоночной верстки.
Есть еще строчно-блочные элементы, флексбокс для тру-браузеров, лэйаут-гриды для современных ишаков, верстка позиционированием, которые куда суровей вырывают из потока... Тысячи этих методов...
У плавающих элементов достаточно в конец строки швырнуть "клеар-фикс":

Код:

.row::after {
  clear: both;
  content: '';
  width: 100%;
  height: 0;
  display: block;
  display: table;
}

.cell-left {
  width: 200px;
  float: left;
}

.cell-right {
  width: 200px;
  float: right;
}

.cell-center {
  margin: 0 200px;
}

Есть еще методы продолжить поток после плавающих элементов: завернуть в блок с overflow: hidden; или display: inline-block; но оба этих варианта сильно уступают клеру по производительности и гибкости.

29.07.2014, 22:14	#1
Smogg Участник клуба Регистрация: 14.06.2011 Сообщений: 1,138	Div aside и float:left/right Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Документ без названия</title> <style type="text/css"> .d1 { float:left 65%; color:#03F; } .a1 { float:right 35%; color:#0F0;} </style> </head> <body> <div> <div class="d1"> sdafsdfasf </div> <aside class="a1"> sdfsafadf </aside> </div> </body> </html> Вот есть такая глупость: внешний Div, внутри которого есть другой div и еще aside. Я хочу думать, что два внутренних элемента флоатятся относительно внешнего diva. Но они ваще никак никуда... идут сверху вниз друг за другом. Почто же?

29.07.2014, 22:24	#2
Smogg Участник клуба Регистрация: 14.06.2011 Сообщений: 1,138	Гык) А, собсно, с чего это мне привиделось, что ширину нужно указывать тут же, в объявлении float'a? Код: `.d1 { float:left; width:65%; color:#03F; }`

17.09.2014, 16:55	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Флоаты не глюковые, это вы их готовить не умеете. На данный момент, плавающие элементы - основной метод колоночной верстки. Есть еще строчно-блочные элементы, флексбокс для тру-браузеров, лэйаут-гриды для современных ишаков, верстка позиционированием, которые куда суровей вырывают из потока... Тысячи этих методов... У плавающих элементов достаточно в конец строки швырнуть "клеар-фикс": Код: `.row::after { clear: both; content: ''; width: 100%; height: 0; display: block; display: table; } .cell-left { width: 200px; float: left; } .cell-right { width: 200px; float: right; } .cell-center { margin: 0 200px; }` Есть еще методы продолжить поток после плавающих элементов: завернуть в блок с overflow: hidden; или display: inline-block; но оба этих варианта сильно уступают клеру по производительности и гибкости. Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
float:left	ZhenyaKad	HTML и CSS	1	06.04.2014 21:55
margin-left, float: left	segail	HTML и CSS	1	01.02.2012 22:56
img align=left - почему div а уровень выше не рисуется по длинне контента?	Mlex	HTML и CSS	2	16.12.2011 14:20
Ошибка типа cannot convert `float*' to `float' for argument `1' ...	Trackman	Помощь студентам	3	23.05.2011 17:09
IE8. не работает padding-left, margine-left	dimonnnn	HTML и CSS	7	13.08.2010 19:33

29.07.2014, 22:53	#4
Smogg Участник клуба Регистрация: 14.06.2011 Сообщений: 1,138	Значит, с флоутом элемент выпадает из потока... Тогда какие еще возможные варианты разбиения на пять классических частей: [____________шапка_______________] [лев.панель] [КОНТЕНТ] [прав.панель] [___________подвал_______________] кроме таблицы и глюкавых флоутов? А то я где-то читал, что в верстке использовать таблицы - прошлый век. подскажите, плиз)

12.09.2014, 14:14	#5
Praid30 Регистрация: 11.09.2014 Сообщений: 4	Получилось справится с проблемой по флотам ?