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!