Трехколоночный макет

Postal · December 23, 2007

Решил сделать верстку слоями с помощью плавающих элементов.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
	<title>Hellow world!</title>
</head>
<body style="margin:0; padding:0">

<div style="width:200px; padding:0; margin:0; height:100px; background-color:green; float:left; color:yellow;">
	Первый
</div>
<div style="width:200px; height:100px; background-color:red; float:right;">
	Третий
</div>
<div style="height:100px; background-color:blue; color:white;">
	Второй
</div>




</body>
</html>

Все бы ничего да в ИЕ между средним слоем и двумя другими образуются нежелательные отступы, как от них избавится?

D.S.Denton · December 23, 2007

нуна так:

<!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=windows-1251" />
<title>Hello, world!</title>
<style type="text/css" media="screen">
* {margin:0; padding:0; border-width:0;}
#container {height:100px; float:right;}
#center {background-color:#00ff00; height:100px; position:relative;}
#left {float:left; width:200px; height:100px; background-color:#ff0000; position:relative;}
#right {float:right; width:200px; height:100px; background-color:#0000ff; position:relative;}
</style>
</head>

<body>

<div id="right">
правый
</div>

<div id="left">
левый
</div>

<div id="container">
  <div id="center">
центральный
  </div>
</div>

</body>
</html>

Dimitry Wolotko · December 23, 2007

В лягушатник.

Postal · December 24, 2007

а почему вообще это происходит в ИЕ? где об этом можно было б почитать?

Sign In

Трехколоночный макет

Question

Postal

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

D.S.Denton

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

Postal

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information