How do I prevent div elements dropping down when resizing browser window?

Question

I want my site to be as flexible as possible, I mean it would be nice that it would look good with various resolutions (from regular tablet resolution to fullHD). My div elements are scalling quite nice but I have a problem with two 'boxes' that are side by side: when I resize browser window (demonstrate the lower resolution), the box on a right side drops down under the left box. Logo and navigation is scalling well, and so in the end will do the right box. But it's not doing it right away like I want.

My site structure looks like this:

<div id="runko">    
<div id="logo">
Site name
</div>

<div id="menu">         
navigation list
</div>

<div id="vasen">
    <div class="teksti">
    something
    </div>  
</div>      
<div id="oikea">
    <div class="teksti">
    something
    </div>
</div>

<div id="alapalkki">
Copyright
</div>

and the CSS like this:

body {
background-color: transparent;
background-image: url(tausta.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% auto;
font-family: Tahoma;
font-size: 14px;
color: #000000;
height: 100%;
}

#runko {
background-color: transparent;
max-width: 1170px;
position: relative;
margin: auto;
overflow: hidden;
}

#logo {
background-image: url(logo.jpg);
background-size: 1138px;
background-repeat: no-repeat;
background-color: transparent;
width: 1170px;
height: 280px;
border: 0px solid transparent;
border: 16px solid rgba(255,255,255,0.5);
border-radius: 16px 16px 0px 0px;
-moz-border-radius: 16px 16px 0px 0px;
-webkit-border-radius: 16px 16px 0px 0px;
border-bottom: 0px;
font-family: Impact, "Tahoma";
font-size: 65px;
text-shadow: 2px 0 0 #FFFFFF, -2px 0 0 #FFFFFF, 0 2px 0 #FFFFFF, 0 -2px 0 #FFFFFF, 1px 1px #FFFFFF, -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF;
text-align: right;
padding: 0px 20px 20px 0px;
display: table-cell;
vertical-align: bottom;
}

#menu {
background-color: #3D2914;
max-width: 1170px;
margin-bottom: 5px;
border-top: 0px;
border-radius: 0px 0px 16px 16px;
-moz-border-radius: 0px 0px 16px 16px;
-webkit-border-radius: 0px 0px 16px 16px;
font-size: 18px;
text-align: center;
font-weight: bold;
}

#vasen {
background-color: transparent;
max-width: 300px;
float: left;
}

#oikea {
background-color: transparent;
max-width: 865px;
position: relative;
margin: auto;
float: left;
margin-left: 5px;
}

.teksti {
background-color: #FFFFFF;
background-color: rgba(255,255,255,0.8);
margin-bottom: 5px;
border: 0px solid transparent;
border: 10px solid rgba(0,255,0,0.2);
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
}

#alapalkki {
background-color: #BAFFBA;
background-color: rgba(255,255,255,0.8);
border: 0px solid transparent;
border: 10px solid rgba(0,255,0,0.2);
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
position: relative;
clear: both;
margin-bottom: 30px;
padding: 5px;
font-weight: bold;
text-align: center;
}

I haven't cleared the CSS yet (taken away the unnecessary properties) but I think that's not causing the problems. So, the problem for is #oikea and maybe even .text. What should I add or change to get it work the way I want? (left and right box are always besides, and maybe the right one drops down when the whole screen width goes under 300px)? I've tried many things but nothing seems to work. :( (Finnish site, so code is in that language; vasen = left, oikea = right, alapalkki = footer, teksti = text)

DEMO on JSFIDDLE Thank you already!

Answer 1

To piggy back off of kougiland; use percentages for your divs. Then when they shrink to a size that's too small use @media queries to define the width you'd like to stop floating- add a float:none or auto. Then you can stack them vertically. Also for images like your logo make sure to include img {max-width:100%;}- this will get them to scale nicely.

media query

@media (min-width: 1100px) {
  body {
    width:50%;
  }
}
@media (max-width: 1100px) {
  div {
    width:40%;
  }
}
@media (max-width: 480px) {
  div {
    width:20%;
  }
}

Answer 2

just use display: inline instead of float:left and avoid fix value use percentages for width google min-width and max-width too

Answer 3

You have to use a wrapper with position:relative; display:inline;float:none; see the working jsfiddle

.menuWrapper
{
  width:770px;min-width:770px;
  height:100%;  
  position:relative; display:inline;float:none;
  color:#e2f2fe;
}

-I dont use overflow:hidden solution because when scrolling I rather want a part of the div's to be visible and not hidding

Answer 4

I had a very similar scenario. I had form data on the left, and then a Content box on the right. I likewise wanted to re-size the browser's viewport without the my Content DIV from dropping below the form... at least until the screen reached a certain size. And I wanted the content DIV to shrink until hitting a pre-definied minimum width, and then no further.

Bansoa's answer got me part of the way. But to keep the border of the right DIV from spilling over across the left, I had to add one more style rule:

**overflow: auto;**

Try that if you have elements within the box, or the border of the box itself, spilling across the left box elements.