html - 我无法使侧边栏不在内容的右侧 float

Question

我不知道如何在 css 中使我的侧边栏位于右侧？有很多错误和错误的地方。请更正并确保图片是侧边栏的背景。 HTML:

body {
  margin: 0;
  padding: 0;
  line-height: 1.7em;
  letter-spacing: 1px;
  font-family: Perpetua, "Times New Roman", Times, serif;
  font-size: 12px;
  color: #333;
  background: #86d8bc url(gambar/seni.png) repeat-x top;
}

a:link,
a:visited {
  color: #dd0034;
  text-decoration: none;
  font-weight: normal;
}

a:active,
a:hover {
  color: #990099;
  text-decoration: underline;
}

#debar {
  float: right;
  width: 20%;
  padding: 15px 22px 15px 24px;
  background: url(gambar/debar.jpg);
}

<center>
  <h3> Tour Akhir Pekan </h3> <b> Liburan gak pake bethal <p> Ribet dan Mahal </b> </p>
  <div id="debar">
    <div class="debar_top"> </div>
  </div>
  <P style="border:solid 1px #123; width:900px; height: 30px; padding: 15px; margin:0; text-align:justify;line-height:23px; color: black;font-size: 18px"> Bingung Pilih Habiskan Waktu Dimana Saat Liburan? <br> <a href=""> Klik</a> untuk Referensi </br>
    <h3 style="border:solid 1px #aab; width:900px; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius:15px; margin:2; text-align:justify;line-height:50px; color: black;font-size: 18px">Pesona Alam Indonesia yang wajib untuk dijelajahi! </h3>
    <h4 style="border:solid 1px violet; width:900px; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius:15px; margin:5; text-align:justify;line-height:50px; color: black;font-size: 18px">Hotel di Indonesia dengan Pemandangan yang Menakjubkan</h4>
</center>

Answer 1

我建议有一个 main 容器，一个用于内容的 section 子容器和一个用于侧边栏内容的 aside 容器。您应用的 HTML 似乎来自一个非常古老的规范(您包含了诸如 center 元素和 bgcolor 属性之类的东西，它们不再使用)。我也建议你read up on new HTML5 elements更加语义化。

main{
  height:400px;
}

main > section{
  width:80%;
  float:left;
  height:100%;
  background:blue;
}

main > aside{
  width:20%;
  float:left;
  height:100%;
  background:red;
}

<main>
  <section></section>
  <aside></aside>
</main>