Trying to design an HTML5 page based on a Flash element I found

I'm trying to implement a design that I found on another site. It's designed in Flash, but I'm trying to replicate something similar using HTML5, CSS, and 开发者_开发百科Javascript (or PHP if necessary).

See the following site. http://www.raytheon.com/newsroom/technology/

I'm trying to replicate the window-shade type design, but I'm just starting. My initial question is, how would I go about making the buttons be alongside the content as such? I'm not worried about the sliding transition at the moment, I'm just wondering how it should be laid out like that.

I'd do it like this:

<div class="pagecontainer">
  <div id="page1" class="page"  style="background: url(picture20px*400px);"/> 
  <div id="page2" class="activepage"  style="background: url(picture20px*400px);"/> 
  <div id="page3" class="page"  style="background: url(picture20px*400px);"/> 
</div>

css:

 .pagecontainer {
  position:relative;
  width:440px;
  height:400px;
  overflow:hidden;
 }
 .activepage {
  float:left;
  width:400px;
  height:400px;
  overflow:hidden;
  padding-left:20px;

 }
.page {
  float:left;
  width:20px;
  height:400px;
  overflow:hidden;
  padding-left:20px;
}

Update: actually, i think (after reading the update of the other answers) that float is better because the animation will be easier with float. I'd still use overflow:hidden on the page. to make the page visible, animate its width, so the active page has a width of 400px. All pages have content of 400px, but only 20px should be visible.

I think you can make the same layout by making div's with small width and big height and put an image inside the div with the text on it horizontal as the flash. Here is a sample code:

<div style="float: left;  width: 20px; height: 400px;background-color:Red">
        </div>
        <div style="float: left;  width: 20px; height: 400px;background-color:Blue">
        </div>
        <div style="float: left;  width: 20px; height: 400px;background-color:Black">
        </div>
        <div style="float: left;  width: 20px; height: 400px;background-color:Yellow">
        </div>
        <div style="clear:both" >
        </div>