Why are my boxes are not in line with each other

Question

I am creating a travel website for my college distinction task. I have started and it is going alright but i am stuck at the moment. I basically have three boxes that are meant to contain some written content in but I can't seem to make them inline each other. The boxes also have to be inline with the box above. Any help would be appreciated, thank you in advance.

HTML

  <div id="wrapper">
      <div id="top">
         <div class="logo"> </div>
      </div>
      <div id="menu">
         <div class="button"> Home </div>
         <div class="button"> Destinations </div>
         <div class="button"> Make A Booking </div>
         <div class="button"> Things To Do </div>
         <div class="button"> Contact Us </div>
      </div>
      <div id="box">
         content here
      </div>
      <div id="deal_one">
      <div id="deal_two">
      <div id="deal_three">
  </div>

CSS

#wrapper {
    width:80%;
    position:relative;
    margin:0 auto;
}

#top {
    width:100%;
    height:200px;
    background-color:rgba(0,95,160,1);
    border:solid 2px #000;
    position:relative;
}

#menu {
    width:100%;
    height:150px;
    background-color:#fff;
    border:solid 2px #000;
    text-align:center;
    position:relative;
    display:inline-block;
}

#box {
    width:100%;
    min-height:500px;
    background-color:rgba(0,95,160,1);
    margin-top:0;
    border:solid 2px #000;
    position:relative;
}

.button {
    font-family:Verdana, Geneva, sans-serif;
    font-size:15pt;
    display:inline-block;
    margin:4.5% 5% 0;
}

.logo {
    position:relative;
    background-image:url(../Images/Logo%203.png);
    background-size:650px;
    width:500px;
    height:900px;
    top:-30%;
    display:inline-block;
    z-index:500;
    background-repeat:no-repeat;
    margin:0 auto 0 -10%;
}

#deal_one {
    width:320px;
    height:300px;
    background-color:rgba(0,95,160,1);
    border:solid 2px #000;
    margin-top:5%;
    margin-left:.1%;
    position:relative;
}

#deal_two {
    width:320px;
    height:300px;
    background-color:rgba(0,95,160,1);
    border:solid 2px #000;
    margin-top:5%;
    margin-left:116.5%;
    position:relative;
}

#deal_three {
    width:320px;
    height:300px;
    background-color:rgba(0,95,160,1);
    border:solid 2px #000;
    margin-top:5%;
    margin-left:118.8%;
    position:relative;
}

http://jsfiddle.net/pRyzE/

Answer 1

Here are some steps to complete your works.

1. Close your div (all the three) properly.
2. Take them in a container div.
3. Set display:inline-block to all the three divs.
4. Set the width of each block to around 33% not the equal to 33% as some space is taken by margin as well.
5. Remove the margin which you have given to all the divs.

HTML

<div id="threeBoxContainer">
    <div id="deal_one"></div>
    <div id="deal_two"></div>
    <div id="deal_three"></div>
</div>

CSS

#threeBoxContainer div {
    display: inline-block;
    background-color: yellow;
}

#deal_one {
    width: 33%;
    height: 300px;
    background-color: rgba(0, 95, 160, 1);
    border: solid 2px black;
    margin-top: 5%;
}

#deal_two {
    width: 32%;
    height: 300px;
    background-color: rgba(0, 95, 160, 1);
    border: solid 2px black;
    margin-top: 5%;
}

#deal_three {
    width: 33%;
    height: 300px;
    background-color: rgba(0, 95, 160, 1);
    border: solid 2px black;
    margin-top: 5%;
}

Js Fiddle Demo

Answer 2

First of all: you should close your divs: <div id="deal_one"></div>

Like @GoE commented already; it's better to float them. Also gives you the opportunity to make them responsive a bit easier (whenever needed):

HTML:

<div id="deal_one" class="deal"></div>
<div id="deal_two" class="deal"></div>
<div id="deal_two" class="deal"></div>

CSS:

.deal { float: left; width: 30%; margin-right: 5%; }
.deal:last-child { margin-right: 0; }

What I'm doing here is floating the deals and put a right margin to keep them apart. The last div should have no right margin because you want it to stick to the side of the content, hence the :last-child rule. In the fiddle I've added box-sizing: border-box because otherwise the border is added to the width, and as such the div will be wider then 30% and will cause the last one to drop to the next line.

Fiddle

Answer 3

I can't post comment yet but seems like you need to remove top and add float: left to your those 3 divs. Hope this helps