Unable to align background color in html and css : I am a beginner to website design and development and also learning it. As a beginner i creating a site which is old bbc news website from the following  archive link http://web.archive.org/web/20140402131524/http://www.bbc.co.uk/news/uk
so i am stcked at watch/listen part the backgroun color orange to link which is below the video is aligning to the right side of it according to my code 
following is my code...

***HTML***

    <html>
    <head>
    <title>Untitled Document</title>
    </head>
    <body>
    <div class="watch">
    <img src="http://s9.tinypic.com/2hd45fp_th.jpg" id="WatchListenlogo"/>
    <span class="watchhead">Watch/Listen</span>
    <img src="http://s9.tinypic.com/35c03yr_th.jpg" id="rightarrow"/>
    <div id="videoa">  
    <img src="http://s9.tinypic.com/j64ufl_th.jpg"/>
    <a href="">Titanic letter could fetch &pound; 100,000</a>
    </div>
    </div>
    </body>
    </html>

***CSS***

    <style type="text/css">
    body{
    margin:0;
    line-height:15px;
    }
    .watch{
    position:relative;
    top:50px;
    right:50px;
    color:#505050;
    line-height:24px;
    background-color:#eeeeee;
    float:right;
    width:336px;
    }
    #videoa{					
    float:left;
    background-color:#d1700e;
    position:relative;
    top:-84px;
    left:25px;
    }
    #videoa a{
    float:left;
    color:white;
    position:relative;
    top:2px;
    left:5px;
    }
    .watchhead{
    font-size:24px;
    font-weight:bolder;
    position:relative;
    top:10px;
    left:8px;
    }
    #WatchListenlogo{
    float:right;
    position:relative;
    top:22px;
    right:10px;
    }
    #rightarrow{
    float:left;
    border-right:solid white 1px;
    position:relative;
    top:40px;
    }
    a{
    text-decoration:none;
    }
    a:hover{
    text-decoration:underline;
    }
    </style>

