Minimum margin in a liquid layout

Question

How do i prevent the content from jumping down below the sidebar when the min-margin is reached?

http://jsfiddle.net/7SAHm/4/

<div id="wrapper">
  <div id="sidebar"></div>
  <div id="content"></div>
</div>

#wrapper {
  width: 100%;
  overflow:hidden;
}
#sidebar {
  float:left;
  width: 20%;
  min-width:50px;
  background-color:#ffb8e0;
}
#content {
  float:left;
  width:80%;
  background-color:#fff7b8;
}

Try to resize the browser window and see that the content jumps down, instead i want it to stay next to each other, even though 80%+50px > wrapper width, instad it should overflow not jump down.

Thanks in advance!

Answer 1

You should use a media query in your CSS to change the percentage-

I have edited your code to show you a demo http://jsfiddle.net/kevinPHPkevin/7SAHm/5/

@media screen and (max-width: 400px) {
     #sidebar {
        width: 50%;
     }
     #content {
        width:50%;    
     }  
}