To align two divs side by side

Question

I've been trying to align these two divs side by side but they just won't and the font color doesn't seem to change as well. I think it must be some small typo I've missed but I just can't seem to locate it.

Here is the link http://jsfiddle.net/X2Ljp/

<div id="footer">
<div id="footer1">
  <p><a href= "Linkpage.html">Site map </a></p>
</div>
<div class="footer2">
  Date updated: 11th May 2014
</div>

The CSS

#footer
{
clear: both;
background-color: #0193B7;
padding-top: 0px;
border-top-color: black;
border-top-style: solid;
border-top-width: 5px;
}  

.footer2
{
float:left;
width: 20px;
color: white;
text-decoration: none;
}

Answer 1

From W3 Schools :

The elements after the floating element will flow around it.

The elements before the floating element will not be affected.

So put your footer2 div before footer1 and everything should be fine.

<div id="footer">
  <div class="footer2">
    Date updated: 11th May 2014
  </div>
  <div id="footer1">
    <p><a href= "Linkpage.html">Site map </a></p>
  </div>
</div>

Answer 2

Your code doesn't seem to be complete. Did you want something like this? You need a width in your first div container for the other div's:

<div id="footer">
    <div class="footer1">
      <p><a href= "Linkpage.html">Site map</a></p>
    </div>
    <div class="footer2">
        <p>Date updated: 11th May 2014</p>
    </div>
</div>

#footer{
  clear: both;
  background-color: #0193B7;
  padding-top: 0px;
  border-top-color: black;
  border-top-style: solid;
  border-top-width: 5px;
  width: 100%
}  

.footer1{
  float:left;
  width: 50%;
  color: black;
  text-decoration: none;
    background-color: blue;
}

.footer2{
  float:right;
  width: 50%;
  color: black;
  text-decoration: none;
    background-color: green;
}

Link to Fiddle

Answer 3

i guess you want to align side by side footer1 and footer2 so add this code in your css file

#footer1 {
display:inline-block;
vertical-align:top;
}
.footer2 {
 display:inline-block;
vertical-align:top;
}

it is more simpler than the use of float and clear