HTML/CSS - Divs wont align correctly

Question

I'm trying to align these divs correctly but they are repositioning themselves at will! I'm trying to align balance horizontally with history whilst transact is aligned vertically below balance.

Edit: .button style is irrelevant.

HTML:

<div id="main-page-content">
<div id="balance">
   <u>Balances</u>
<div class="total-balance">
    Total Balance: 
</div>
<div class="a-balance">
    Balance:
    <a href="#" class="button"/>Deposit</a>
    <a href="#" class="button"/>Withdraw</a>
    </div>
<div class="b-balance">
    Balance:
    <a href="#" class="button"/>Deposit</a>
    <a href="#" class="button"/>Withdraw</a> 
    </div>
</div>
<div id="transact">
</div>
<div id="history">     
</div>

CSS:

#main-page-content {
   max-width:960px;
   margin:auto;
   max-height: 500px;
   padding-top:25px;
   height:100%;
}

#balance {
    font-family:Lato;
    background-color:#00253F;
    color:#FFFFFF;
    font-size:24px;
    padding-left:15px;
    font-weight:bold;
    padding-right:10px;
    padding-top:15px;
    height:130px;
    width:52%;
    float:left;
}

#transact {
    font-family:Lato;
    background-color:#00253F;
    color:#FFFFFF;
    font-size:24px;
    padding-left:15px;
    font-weight:bold;
    padding-right:10px;
    padding-top:15px;
    height:130px;
    width:52%;
    float:left;
    margin-top:10px;
}

#history {
   background-color:#00253F;
   width:32%;
   height:300px; 
   float:right;
}

.total-balance {
    padding-top: 8px;
    font-family:Lato;
    width:100%;
    float: left;
    font-size:14px; 
    height:16px;
}

.a-balance {
    padding-top: 8px;
    font-family:Lato;
    width:100%;
    float: left;
    font-size:14px; 
    height:16px;
}

.b-balance {
    padding-top: 8px;
    padding-bottom:8px;
    font-family:Lato;
    width:100%;
    float: left;
    font-size:14px; 
    height:16px;
}

The result of the above code or Checkout This Demo

Answer 1

This is due to the way that float is handled in the browser. I recommend if you want to do two columns to either do two wrapping colums around the entire document, or use a grid framework which may help you out in the long run.

I set up a jsfiddle to help illustrate this: https://jsfiddle.net/a01cv4ec/

HTML

<h1>Using floats</h1>
<div>
    Only the items you want to distort should be floated...
</div>
<div id="main-page-content">
<div id="balance">
   <u>Balances</u>
<div class="total-balance">
    Total Balance: 
</div>
<div class="a-balance">
    Balance:
    <a href="#" class="button"/>Deposit</a>
    <a href="#" class="button"/>Withdraw</a>
    </div>
<div class="b-balance">
    Balance:
    <a href="#" class="button"/>Deposit</a>
    <a href="#" class="button"/>Withdraw</a> 
    </div>
</div>
<div id="transact">
</div>
<div id="history">     
</div>

<h1>Using inline-block positioning</h1>
<div>
    This personally is my favorite.  Allows for positioning and responsiveness without css hacks to make sure sizes match up.
</div>
<div id="main-page-content-2">
    <div id="col-1">
        <div id="balance">
           <u>Balances</u>
           <div class="total-balance">
                Total Balance: 
           </div>
           <div class="a-balance">
                Balance:
                <a href="#" class="button"/>Deposit</a>
                <a href="#" class="button"/>Withdraw</a>
           </div>
           <div class="b-balance">
                Balance:
                <a href="#" class="button"/>Deposit</a>
                <a href="#" class="button"/>Withdraw</a> 
           </div>
        </div>
        <div id="transact">
        </div>
</div>
<div id="column-2">
    <div id="history-inline">     
        history
    </div>
</div>

CSS

#main-page-content {
   max-width:960px;
   margin:auto;
   max-height: 500px;
   padding-top:25px;
   height:100%;
}

#balance {
    font-family:Lato;
    background-color:#00253F;
    color:#FFFFFF;
    font-size:24px;
    padding-left:15px;
    font-weight:bold;
    padding-right:10px;
    padding-top:15px;
    height:130px;
    width:52%;
    float:left;
}

#transact {
    font-family:Lato;
    background-color:#00253F;
    color:#FFFFFF;
    font-size:24px;
    padding-left:15px;
    font-weight:bold;
    padding-right:10px;
    padding-top:15px;
    height:130px;
    width:52%;
    float:left;
    margin-top:10px;
}

#history {
   background-color:#00253F;
   width:32%;
   margin-left: 58%;
   height:300px; 
}

.total-balance {
    padding-top: 8px;
    font-family:Lato;
    width:100%;
    float: left;
    font-size:14px; 
    height:16px;
}

.a-balance {
    padding-top: 8px;
    font-family:Lato;
    width:100%;
    float: left;
    font-size:14px; 
    height:16px;
}

.b-balance {
    padding-top: 8px;
    padding-bottom:8px;
    font-family:Lato;
    width:100%;
    float: left;
    font-size:14px; 
    height:16px;
}

.main-page-content-2 {
   width:100%;    
}

.main-page-content-2 > div {
    display:inline-block;
    vertical-align:top;
    color:#FFF;
}

.main-page-content-2 > div:first-child > div {
    margin:2px;
}


#history-inline {
   color:#FFF;
   background-color:#00253F;
   width:32%;
   margin-left: 58%;
   height:300px; 
}

Basically the better way to handle those is either through controlled floats, or even nicer with inline-block positioning.

Answer 2

If the thing you want is to put the history to top of the parent div just because it is like a grid you should use history above your transact.

<div id="history">Hist
</div>
<div id="transact">Trans
</div>

Answer 3

You just need to move history above transact in your html:

 <div id="history">Hist
 </div>
 <div id="transact">Trans
 </div>

#main-page-content {
  max-width: 960px;
  margin: auto;
  max-height: 500px;
  padding-top: 25px;
  height: 100%;
}
#balance {
  font-family: Lato;
  background-color: #00253F;
  color: #FFFFFF;
  font-size: 24px;
  padding-left: 15px;
  font-weight: bold;
  padding-right: 10px;
  padding-top: 15px;
  height: 130px;
  width: 52%;
  float: left;
}
#transact {
  font-family: Lato;
  background-color: #00253F;
  color: #FFFFFF;
  font-size: 24px;
  padding-left: 15px;
  font-weight: bold;
  padding-right: 10px;
  padding-top: 15px;
  height: 130px;
  width: 52%;
  float: left;
  margin-top: 10px;
}
#history {
  background-color: #00253F;
  width: 32%;
  height: 300px;
  float: right;
  color: #fff
}
.total-balance {
  padding-top: 8px;
  font-family: Lato;
  width: 100%;
  float: left;
  font-size: 14px;
  height: 16px;
}
.a-balance {
  padding-top: 8px;
  font-family: Lato;
  width: 100%;
  float: left;
  font-size: 14px;
  height: 16px;
}
.b-balance {
  padding-top: 8px;
  padding-bottom: 8px;
  font-family: Lato;
  width: 100%;
  float: left;
  font-size: 14px;
  height: 16px;
}

<div id="main-page-content">
  <div id="balance">
    <u>Balances</u>
    <div class="total-balance">
      Total Balance:
    </div>
    <div class="a-balance">
      Balance:
      <a href="#" class="button">Deposit</a>
      <a href="#" class="button">Withdraw</a>
    </div>
    <div class="b-balance">
      Balance:
      <a href="#" class="button">Deposit</a>
      <a href="#" class="button">Withdraw</a>
    </div>
  </div>
  <div id="history">Hist
  </div>
  <div id="transact">Trans
  </div>

</div>