Div的水平对齐不正确

Question

Here is the site in question: http://jayduff.co.uk/

I previously had the images/links on the left and the header on the left, I decided to change it to make it more standardized but the top two divs that hold the title and the links don't seem to align up properly anymore?

Here is the CSS for both my link div and my title div (you can also view the source of my link above)

    #title { 
      float:left;
      font-family: 'BebasNeueRegular', sans-serif;
      font-color: #6D929B;
      -webkit-font-smoothing: antialiased; 
      text-rendering: optimizeLegibility;  
    }

    #links { 
      margin-top:40px;
    }

I then have a div below... which holds my body text

   #mainText {
     width: 450px;
     word-wrap: break-word; 
     margin-left:45px;
   }

I'm pretty sure I am missing something from the div styles above and that is causing the top two divs to not be properly aligned with the third div below it?

Here is an example of how it should be

title                links
**************************** 
* JOSHUA DUFFY *  O O O O  *                                                         
****************************
* mainbody                 *
*                          *
*                          *
****************************

Hope that makes sense, where am I going wrong? I'm pretty sure its not the placement of my divs just the attributes above? Thanks in advance

Answer 1

try this

  #mainText {
        clear: both;
        margin-left: 45px;
        width: 450px;
        word-wrap: break-word;
    }

#links {
    float: left;
    margin-top: 40px;
}

#title {
    float: left;
    font-family: 'BebasNeueRegular',sans-serif;
    text-rendering: optimizelegibility;
}

Answer 2

From what I can see, you are missing float:left; on your links div style....