31.10.2013 19:14:14 Проблемы с позиционированием блоков При помощи свойства float. Сообщение #1
Веселый Дрозд
Новичок
Дата регистрации:
15.08.2013 17:50:06
Сообщений: 4
Три блока: левый, центральный и правый. Левому и правому задаю ширину, а так же соответствующие значения float. Но центральный между ними втискиваться никак не хочет. На левый налезает, а правый спихивает вниз, занимая таким образом всю ширину родительского контейнера. Почитал на просторах интернета - такие проблемы встречаются, но решения нигде не нашел. Пробовал и центральному задать ширину, но этот индеец, прости Господи,соскакивает вниз, занимая 2 строки, если можно так выразиться.
Вот как выглядят эти три поросенка
<!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>
<title>block</title>
<meta content="text/html; charset:utf-8" http-equiv="Content-Type">
<link href="styles.css" type="text/css" rel="stylesheet">
#center{
background-color: #ff0
}
#list{
margin: 0 auto;
width: 900px;
}
#left{
background-color: #f00;
float: left;
width: 300px;
}
#right{
background-color: #f00;
float: right;
width: 300px;
}
</link>
</head>
<body>
<div id="list">
<ul>
<li id="left">
<a title="main" href="#">Main</a>
</li>
<li id="center">
<a title="about" href="#">About</a>
</li>
<li id="right">
<a title="contacts" href="#">Contacts</a>
</li>
</ul>
</div>
</body>
</html>
Вот как выглядят эти три поросенка
