3 svar · 271 visningar · startad av Madmartigan
Jag har en sida med två div-lager som ligger till vänster efter varandra på höjden.
Hur gör jag för att positionera ut dessa efter hur stort browserfönster användaren har, dvs om han har ett litet fönster kommer de på höjden och om han har ett större fönster ska de lägga sig på brevid varandra. Detta för att utnyttja bredden.
Hur gör jag detta? Någon som kan hjälpa mig?
Om du kan stå ut med att div'arna inte har position: absolute finns det en enkel lösning, sätt float: left på den vänstra. Exempel:
<style type="text/css"><!--
.left {border: 1px solid black; float: left; width: 200px; padding: 15px;}
.right {border: 1px solid black; width: 500px; padding: 15px;}
--></style>
...
<div class="left">
Vänster
</div>
<div class="right">
Höger<br />
Text <br />
Text <br />
Text <br />
</div>
Ja, det fungerar om jag har två lager som kan röra sig fritt, men det vara inte riktigt det jag ville åstakomma. Jag ska förklara mig bättre.
Om jag har tex tre lager och vill kunna styra dem beroende på fönstretts storlek.
Om lager 1 och 2 alltid är på samma position, men lager 3 flyttas upp brevid lager 2 om det finns plast. (se bild)
Jag vill alltså att ett lager ska flyttas om storleken på browerfönstet har en viss bredd.
Någon som kan hjälpa till?
Här är ett exempel:
<html>
<style type="text/css"><!--
.pa {position:absolute;}
#left {border: 1px solid black; left:10px; width: 150px; top: 50px;}
#middle {border: 1px solid black; left: 170px; width: 450px; top: 50px;}
#right {border: 1px solid black; left: 630px; width: 150px; top: 50px;}
--></style>
<script>
function fixResize(){
var elm = document.getElementById("right");
if(document.body.clientWidth<800){
elm.style.left = "10px"
elm.style.top = (50 + document.getElementById("left").clientHeight +10) + "px"
}else{
elm.style.left = "630px"
elm.style.top = "50px"
}
}
window.onload=window.onresize=fixResize;
</script>
<div class="pa" id="left">
Vänster
</div>
<div class="pa" id="middle">
mitt<br />
Text <br />
Text <br />
Text <br />
</div>
<div class="pa" id="right">
Höger
</div>
</html>