I can't make sidebar not floating right of content

Question

I don't know how to make my sidebar on the right in css? There's many wrong and idk where the wrong at. Please correct and make sure the picture be background of sidebar. 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

Try this, don't use fix width value...

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;
  height: 100%;
}

html {
  height: 100%;
}

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

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

.right-block {
  float: right;
  width: 20%;
  height: 100%;
}

.left-block {
  float: left;
  width: 80%;
}

#debar {
  height: 100%;
  padding: 15px 22px 15px 24px;
  background: red;
}

<div class="left-block">
  <center>
    <h3> Tour Akhir Pekan </h3> <b> Liburan gak pake bethal <p> Ribet dan Mahal </b> </p>
    <P style="border:solid 1px #123; 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; 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; 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>
</div>
<div class="right-block">
  <div id="debar">
    <div class="debar_top"></div>
  </div>
</div>

Answer 2

I recommend having a main container, a section child container for content and a aside container for the sidebar content. The HTML you've applied seems to be from a very old specification (you've included things like the center element and bgcolor property, which are no longer used). I also suggest that you read up on new HTML5 elements to be more semantic.

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>