Buttons not fit in 1 line when resized

I have two little html/css problem.

Basically, I have a开发者_JAVA百科 blue frame (2 div: 1 outer-div for the 1px border and 1 inner-div for the 7px border) which contains a title (top left) a search textbox (top right) and some buttons.

I have a jsFiddle here: http://jsfiddle.net/n2Rmx/

We can see the result in full screen here for reproducing the problem: http://jsfiddle.net/n2Rmx/embedded/result/

1. First problem: when my browser is maximized, I have my search textbox located at top right and all my buttons fit in one horizontal line. That's ok. But when I resize my browser (the width) I have my buttons fit on two lines and I don't know why?? I would like all my buttons remains in one line.

2. Second problem: when my browser is maximized, my inner-div and outer-div showed correctly. But when my browser is resized (width) at a certain point, the right side of the outer-div is hided by the inner-div and I don't know why??

Any help will be gretly appreciated.

1st question:

If the container is not large enough to display inline elements (as buttons are) they will wrap to the next line. you may use white-space: nowrap; on .inner-div to prevent that.

2nd

You did specify a min-width, so the div will always be at least 700px (740px) wide. If the browser window is not as wide, you will have horizontal scroll bars. The overlapping from the inner div comes from your border and padding definition and the definition of your min-width. Here some math

min-width: 700px
border:      7px x 2 (left and right)
padding:    15px x 2 (left and right)
-------------------------------------
           744px > 740px min-width of the outer div

Here is my answer to your question as well as on jSFiddle - http://jsfiddle.net/n2Rmx/8/

Pretty much you needed your div that contained your buttons with a width. (I also wrapped your search bar into a div.)

  <div id="search">
      <input type="text" name="SearchCriteria.Anything" />
    </div>


#search { float: right;
   position: relative;
   right: 10px;
   top: -32px;
   outline: none}

input[type="button"] {display:inline;width:100px}
#buttonbar {
    border:4px solid #333;
    clear:both;
    margin:30px 0;
    overflow:hidden;
    width:960px}

Edit your css..Change width:auto to width:900px(or whatever);

.inner-div
{
    width: auto;
    padding: 5px 15px 0px 15px;
    border: 7px solid #f3f7fd;
    background-color: #fcfdfe;
    min-width:700px;
    display:block;
}

.outer-div
{
    width: auto;
    border: 1px solid #bbd8fb;
    border-collapse: collapse;
    min-width:740px;
    display:block;
}

and also there is a pblm in this line...

<div style="font-size: 1.5em; color: #000; margin-bottom: 10px;">             Recherche d'affaires               </div>

remove margin-bottom: 10px; and check.it will work..

and i have a suggestion to use table...

<table id="buttonbar">
     <tr><td><input type="button" value="this is the first" /></td>
     <td> <input type="button" value="this is the second" /></td>
     <td> <input type="button" value="this is the third" /></td>
     <td> <input type="button" value="this is the fourth" /></td>
     <td> <input type="button" value="this is the fifth" /></td>
     <td> <input type="button" value="this is the sixth" /></td>
     <td> <input type="button" value="this is the seventh" /></td>
     <td> <input type="button" value="this is the eigth" /></td>
    </table>