Плавающие блоки - стыковка

lanzs · March 30, 2010

Пытаюсь сделать блоки шириной 50%, 1\3 (т.е. 33%) и 2\3 (т.е. 67%)

Соответственно блоки 50% только между собой вставляются (лефт и райт)

А блоки 1\3 и 2\3 компонуются между собой (лефт и райт)

Проблема в следующем: почему-то после первого "третичного" блока перестает воспринимать стили... ошибку увидеть сам не могу

Исходник HTML:

<!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>Untitled Document</title>
<link rel="stylesheet" rev="stylesheet" href="layout.css" />
</head>

<body>
<div id="wrapper">

 <div id="container">

  <div id="header">

   <div class="half2left"></div>
   <div class="half2right"></div>

   <div class="clear"></div>

   <div class="2thirds2left"></div>
   <div class="third2right"></div>

   <div class="clear"></div>

  </div>

  <div id="center">

   <div class="third2left"></div>
   <div class="2thirds2right"></div>

   <div class="clear"></div>

  </div>

  <div id="footer"></div>
 </div>

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

Стиль:

@charset "utf-8";
/* CSS Document */

*, html {
	margin: 0;
	padding: 0;
}

#wrapper {
	width: 100%;
	height: 100%;
}

#container {
	width: 960px; 
	margin: 0 auto;
}

/* Header goes here */
#header {
	width: 960px;
}

/* Center goes here */
#center {
	width: 960px;
}

/* Footer goes here */
#footer {
	width: 960px;
}

/* 50% parts */
.half2left {
	width: 50%;
	float: left;
	background: white;
	height: 100px;
}
.half2right {
	width: 50%;
	margin-left: 50%;
	background: green;
	height: 100px;
}

/* 1/3 parts */
.third2left {
	width: 33%;
	float: left;
	background: lightblue;
	height: 100px;	
}
.third2right {
	width: 33%;
	margin-left: 67%;
	background: orange;
	height: 100px;
}

/* 2/3 parts */
.2thirds2left {
	width: 67%;
	float: left;
	background: brown;
	height: 100px;	
}
.2thirds2right {
	width: 67%;
	margin-left: 33%;
	background: brown;
	height: 100px;	
}

/* clear&fix */

.clear {
	clear: both;
}

*в результате, блоки должны иметь разные цвета (проверка такая работает ли стиль ), но они перестают "окрашиваться"

Searcher · March 31, 2010

имена классов не стоит начинать с цифры

psywalker · March 31, 2010

имена классов не стоит начинать с цифры

+1

ТС, у меня везде блоки окрашиваются в разные цвета, в каком браузере трабл у тебя?

lanzs · March 31, 2010

Searcher, psywalker, спасибо!

проблема была в "цифрах"

исправил, все заработало

Searcher · March 31, 2010

на здоровье!

Sign In

Плавающие блоки - стыковка

Question

lanzs

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

lanzs

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information