Три "float" и "clear:both;"

tga123 · November 26, 2010

У меня получается это:

А надо это:

Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"> 
#left {
height:150px;
width:100px;
float:left;
background:#990000;
}
#inner_left {
height:80px;
width:70px;
float:left;
background:#3366FF;
margin-right:10px;
}
#right {
width:100px;
height:250px;
float:right;
background:#990000;
}
#center {
margin-left:110px;
background:#339966;
margin-right:110px;
padding:10px;
margin-bottom:10px;
}
.clearfloat { 
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
</head>
<body>
<div id="left">left</div>
<div id="right">right</div>
<div id="center">
<div id="inner_left">inner_left</div>
<div>1<br />2<br />3</div>
<div class="clearfloat"></div>
</div>
<div id="center">
<div id="inner_left">inner_left</div>
<div>1<br />2<br />3</div>
<div class="clearfloat"></div>
</div>
</body>
</html>

Что я делаю не так?

Great Rash · November 26, 2010

Реализуйте самый обычный трехколоночный макет («css трехколоночный макет» в Google.), а потом вставляйте в центральную колонку ваши зеленые блоки. И не нужны вам никакие clear: both;.

tga123 · November 26, 2010

Реализуйте самый обычный трехколоночный макет («css трехколоночный макет» в Google.), а потом вставляйте в центральную колонку ваши зеленые блоки. И не нужны вам никакие clear: both;.

Мне нужно чтобы центральные блоки был "резиновым", и в них можно было использовать "clear:both;", для того что небыло вот так:

Great Rash · November 26, 2010

http://www.jsfiddle.net/GqB33/

tga123 · November 26, 2010

http://www.jsfiddle.net/GqB33/

Спасибо, помогло.

Sign In

Три "float" и "clear:both;"

Question

tga123

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

tga123

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

tga123

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information