CSS дивы не складываются в правильном вертикальном порядке - PullRequest
0 голосов
/ 01 июня 2009

У меня есть два деления. Я хочу, чтобы один с идентификатором «hor_rule» появлялся под другим с идентификатором «header».

У меня сложилось впечатление, что это должно произойти автоматически. Должно быть, я делаю глупую ошибку.

--- 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>ARCS <~~ the title ~~></title>
    <style type="text/css" media="all">@import "css/styles.css";</style>
</head>
<body>
<div id="container">
    <div id="header">
    <span id="header_title"><~~ the title ~~></span>
</div>
<div id="hor_rule"></div>
</div>
</body>
</html>

--- Файл CSS ---

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

#header { 
float:left; 
width:64%;
vertical-align:top;
margin:12px;
}

#header_title { 
font-family: Arial;
font-size:xx-large;
font-weight: bold;
}

#hor_rule{
    height:1px;
    background-color:#999;
}

1 Ответ

4 голосов
/ 01 июня 2009

ваш div "header" плавает и имеет ширину 64% ... это означает, что что-то (без примененной к нему ширины или шириной менее 36% контейнера) будет скользить вверх и заполните это место. установите ширину hor_rule выше 36%.

в качестве альтернативы, вы можете установить свой div-контейнер на большую ширину или иметь свой div-контейнер clear: both;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...