Не связанные divs толкают друг друга. CSS3, HTML

У меня странное поведение на макете веб-страницы. Когда я добавляю еще несколько div внутри div-sideBar, центральная часть веб-страницы будет нажата вниз. Они не связаны с центральной частью. У них есть границы, и я вижу, что они далеки от "главного" div. Есть ли способ предотвратить это или я должен играть с полями каждый раз, когда добавляю новый div.

Вот мой код HTML:

<div id="sideBarLeft">
    <div id='article1'><h3>Article 1</h3><div> //Just added
    <div id='article2'><h3>Article 2</h3><div> //Just added
    <div id='article3'><h3>Article 3</h3><div> //Just added
    <div id='article4'><h3>Article 4</h3><div> //Just added
</div>

Код CSS:

#sideBarLeft {
  position: fixed;
  height: 800px;
  width: 250px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 1px;
  padding-top: 100px;
  padding-left: 5px;
  float: left;
  word-wrap: break-word;
  z-index: 1;
  border: 1px solid #808080;
}

#article1 {
  width: 200px;
  border: 1px solid red;
}

Вот центральная часть:

#container{
  margin: 0 auto;
  margin-left: 256px;
  max-width: 600px;
  margin-top: 120px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 20px;
  float: left;
  width: 600px;
  border: 1px dotted #808080;
}

Вот обертка:

#wrapper {
  width: 1200px;
  margin: 0 auto;
}