У меня есть довольно простой кусочек кода. Это выглядит так:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home Index Test</title>
<link rel="stylesheet" type="text/css" href="reset.css" media="all">
<link rel="stylesheet" type="text/css" href="styles.css" media="all">
<!-- <script type="text/javascript" src="view.js"></script> -->
</head>
<body>
<div id="wrapper">
wrapper
<div id="header">
<div id="logo">
<img src="kimchi_img/bibi_logo.jpg">
</div>
<div id="login_menu">
<p>About Contact | Sign In Register </p>
</div>
</div>
</div>
</body>
</html>
Легко, правда? Класс-обертка для объединения всего, блок заголовка с логотипом и меню. Но когда я смотрю на него в Firebug, он действует так, как будто класс-обертка ничего не содержит. Я знаю, что в Firefox элемент div должен содержать что-то для отображения. Поэтому я попробовал небольшой тест - я поместил слово «обертка» в класс обертки, как вы видели выше. Что ж, теперь он обнаруживается, но действует так, будто «обертка» имеет длину только одну строку. Я чувствую, что пропустил важный шаг в этом процессе. Вот соответствующий CSS:
#wrapper {
clear:both;
margin:0 auto;
padding:0;
width:960px;
}
#header{
width:960px;
}
#logo{
float:left;
width: 380px;
}
#login_menu{
float:left;
text-align: right;
width:580px;
}
У меня также есть reset.css мурлыканье в спину, но оно не прояснилось.