3 div (left, center, right), div goes down if size < min-width

Question

So I have 3 Divs. Left, center right.

Image

If browser size smaller than center min-width, it goes down. Video:

Video

I don't know what do I wrong, so many people tried to help me + I searched for it but I didn't find anything. Here's the code:

HTML:

<div id="parent">
    <div id="left"></div>
    <div id="right"></div>
    <div id="center"></div>
</div>

CSS:

#parent
{
margin-left: 5%;
margin-right: 5%;
position: fixed;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
overflow: auto;
}

#left {
position: relative;
width: 370px;
height: 100%;
float: left;
background: #093F5C;
overflow: hidden;
}
#right {
position: relative;
width: 230px;
height: 100%;
float: right;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
min-width: 550px;
overflow: auto;
}

Answer 1

The #center should have a max-width:550px, not a min-width:550px. You'll also probably want to add a width to it as well.

#center {
    height:100%;
    max-width:550px;
    width:100%;
    overflow:auto;
}

There's also a lot of other odd things about your CSS in general, but thats beyond the scope of this question... Some things to think about - why does the #parent have a position:fixed ? Why is everything else position:relative ? And why do you have heights of 100% ?

Answer 2

maybe...

#left {
   position: absolute;
   left:0px;
   top: 0px;
   width: 370px;
   height: 100%;
   background: #093F5C;
   overflow: hidden;
}

#right {
  position: absolute;
  right:0px;
  top:0px;
  width: 230px;
  height: 100%;
  background: #093F5C;
  overflow: auto;
 }

 #center { 
   height: 100%;
   position:absolute;
   left: 370px; /*width of leftDiv */
   right: 230px; /*width of rightDiv */
   top:0px;
   /*min-width: 100px;*/
   overflow: auto;
   background: red;
} 

jsfiddle: http://jsfiddle.net/alemarch/35bxtc2z/7/ (i have change the dimension fixed of the left and right div). Is this what you search?