Expand width of parent when zoom in and scroll-x for parent div

I've one parent div and 3 child div. When zoom in the browser, i want the parent div to have scroll x while position of the child content still remain, what happend to me now is when I zoom in the browser, child-div3 move below child-div2. below I illustrate the css and html

body{padding: 0 5px;margin: 0;min-width: 1280px;overflow: auto;}
div#parent{min-width: 1280px;overflow-x:scroll;overflow-y:hidden;}
div#parent div{position: relative;}
div#child-div1{height:500px;width:480px;margin-top: 10px;float: left;}
div#child-div2{float:left; max-width: 600px;max-height: 500px;}
div#child-div3{height:500px;width:480px;margin-top: 10px;float: left;}

html:

<body>
    <div id="parent">
        <div id="child-div1">
            content..
        </div>
        <div id="child-div2">
            <img border="0" src="../images/images.png" alt="" width="600px" height="500px" />
        </div>
        <div id="child-div3">
            content..
        </div>
    </div>
<body>

here with sample code