html - CSS centered divs side by side -

I have this lower part of my page. Style:

  .featuredcontainer {width: 450px; Height: 700px; Margin-left: auto; Margin-right: auto; Status: Relative; Correct: 160px; Top: 30px; Border: 1 PX Groove Gray; } .navcontainer {margin-left: auto; Margin-right: -8 pixels; Status: Relative; Top: 75px; Height: 600px; Width: 300px; }   
 and example HTML:  
  & lt; Div class = "featuredcontainer" & gt; Content & lt; / Div & gt; & Lt; Div class = "lessonnavcontainer" & gt; Menu & lt; / Div & gt;   
 When the page is displayed. The newbie has the right (as it should be), but under the specially displayed container. When I take up the encancer using relative position, it looks correct, but there is a bunch of empty space in the bottom of the page What should I do? 
  
 
 
 Fill two of your divs around with a "cover" div:  
  & lt; Div id = "wrapper" & gt; & Lt; Div class = "featuredcontainer" & gt; Content & lt; / Div & gt; & Lt; Div class = "lessonnavcontainer" & gt; Menu & lt; / Div & gt; & Lt; / Div & gt;   
 Then to add them, add margins to the wrapper:  
  #wrapper {margin: 0 pixel auto; }   
 Then, with two divs, add a float:  
  .featuredcontainer {float: left; }. Replacement container {float: left; }   
 For the center of the job, you need to declare the width on the cover:  
  #wrapper {width: 800px; }