侧边栏位于内容下方答案

【问题标题】：sidebar goes below the content侧边栏位于内容下方
【发布时间】：2014-05-29 23:47:53
【问题描述】：

我正在尝试从内容的右侧添加侧边栏，但它位于其下方。我真的不明白问题是什么，我已经尝试过更改所有内容，但仍然无法正常工作。

CSS：

body {
    font: 10pt Calibri, Helvetica; /* Шрифт на веб-странице */
    background: #E8E8E8; /* Цвет фона */
    margin: 0; /* Убираем отступы */
}
h2 {
    font-size: 1.1em; /* Размер шрифта */
    color: #1C1C1C; /* Цвет текста */
    margin-bottom: 0; /* Отступ снизу */
}
#wrapper {
    width: 990px; /* ширина обертки */
    margin: 0 auto; /* отцентровка */
}
#header{  
   width:100%; 
   height:150px;
   background-color:#0000FF;
   color:#1C1C1C;
   font-size: 20px;
}
#sidebar {
    width: 250px; /* ширина меню */
    height: 300px; /* высота меню */
    float: right; /* выравнивание по правому краю */
    background: #FF69B4; /* фон меню */
}
#content {
    background: #FF4500; /* фоновый цвет контента */
    margin-right: 220px; /* Отступ слева */
    width: 700px;/*ширина*/
    word-break: break-all;/*перенос слов*/
    color:#1C1C1C;
    font-size: 10px;
}
#footer {
    height: 50px; /* высота футера */
    color: #fff; /* цвет текста */
    background: #000; /* фон */
    clear: both; /* прерывание обтекания */
}

我的一个页面：

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
</style>
</head>
<body>
<div id="header">
<h1>Образовательные программы </h1>
<table border="0" cellpadding="50">
<tr>
<th><a href='/first.php' target="content" style="color: #E8E8E8">Главная</a></th>
<th><a href='/search.php' target="content" style="color: #E8E8E8">Поиск</a></th>
<th><a href='/2.php'target="content" style="color: #E8E8E8">Задать вопрос</a></th>
<th><a href='/3.php'target="content"style="color: #E8E8E8">Контакты</a></th>
<th><a href='/all_list.php'target="content" style="color: #E8E8E8">Админка</a></th>
<th><a href='/category.php'target="content" style="color: #E8E8E8">Категории</a>           </th>
</tr>
</table>
</div>
<div id="wrapper">
<div id="content">
<h1 align="center">Страница администратора</h2>
<?php
 $conn = mysql_connect ("localhost", "root", "") or die ("Соединение не установлено!");
 mysql_select_db('university'); // выбор БД
 mysql_query("SET NAMES 'utf8'"); // кодировка
 echo '<table border="1" cellspacing="0" cellpadding="12" align="center">';
 echo '<thead>';
 echo '<tr>';
 echo '<th>ID</th>';
 echo '<th>Название</th>';
 echo '<th>1</th>';
 echo '<th>2</th>';
 echo '</tr>';
 echo '</thead>';
 echo '<tbody>';
 $res = mysql_query("SELECT * FROM news");
 while($news = mysql_fetch_assoc($res)) {?>
 <tr>
 <td><a href="detail.php?id=<?=$news['id']?>"><?=$news['id']?></td>
 <td><a href="detail.php?id=<?=$news['id']?>"><?=$news['program']?></td>
 <td><a href="delete.php?id=<?=$news['id']?>">Удалить</td>
 <td><a href="edit_form.php?id=<?=$news['id']?>">Редактировать</td>
 </tr><?
 }?>
 </tbody></table>
 <form name="add" action="add_form.php">          
 <p><input type="submit" value="Добавить программу"></p>
 </div>
 <div id="sidebar">
<h2>Here i will have sidebar</h2>
</div>
</div>
</body>
 </html>

【问题讨论】：

请同时包含您的标记。
如果你能设置你的标记/css的jsfiddle会很棒
请创建一个小提琴
但我不使用 javascript
发布您的 html 脚本

标签： html css

【解决方案1】：

您的数学完全不同步：您的 #wrapper 设置为 990px。

#content width + #content margin + #sidebar width...
700px + 220px + 250px = 1170px

在#content 上增加包装或减少边距

【讨论】：

【解决方案2】：

您的布局并不完美。您的 ID header 具有 100% 宽度，而 ID wrapper 是 990px。

要么使用百分比，要么使用 px 值。
如上所述，您的内部div widths 超过使用margin 和width
将float:left 提供给ID content and sidebar 并在% 中提供宽度
使用 Firebug，我可以看到您的 div，ID 为 slidebar，由标签包裹。

我希望清除所有这些混乱你的布局将修复。

【讨论】：