Rendering two div in a div horizantally

I have a parent div having two child divs which are in horizantal ,Now I want to add other div such that the pagination should come.

Here is the code.

<div 开发者_如何学Goid="parent">
     <div id="left"></div>
      <div id="right"></div>
</div>

Here, If i add other div to 'parent',It will append at last,but should not be shown and pagination should come. Using floats, I am making the div's horizantal.I have to show only two div's,After that pagination should come.

This is just a DEMO:

HTML:

<div id="parent">
  <div id="wrapper">
    <div id="left">window 1</div>
    <div id="right">window 2</div>
  </div>
</div>
<div id="paginator"><span id="prev">Previous</span><span id="next">Next</span></div>

CSS:

#parent {
    width: 850px;
    overflow: hidden;
    padding: 10px;
    height: 320px;
    border: 1px solid #f00
}
#wrapper div {
    width: 400px;
    border: 1px solid #ccc;
    height: 300px;
    display:inline-block;
    margin: 10px
}
#paginator {
    margin: 10px;
    display: block
}
#paginator span {
    width: 30px;
    padding: 5px;
    margin: 10px;
    background: #1f1f1f;
    color: #fff;
}

JQUERY:

$(function() {
    $('#next').click(function() {
        $('#wrapper').append($('<div>window 3</div><div>window 4</div>')); // you can add div using other way
        $('#wrapper').animate({
            marginLeft: '-=860px'
        },
        500, 'linear');
    });
    $('#prev').click(function() {
        $('#wrapper').animate({
            marginLeft: '+=860px'
        },
        500, 'linear');
    });
});

Not sure I understand your question, but I'll give it a shot...

<div id="parent">
     <div id="left"></div>
     <div id="right"></div>
</div>
<div style="clear:both"></div>

<div id="pagination"></div>

... is this what you mean to do?