Hoffe ihr könnt mir hier helfen. Ich wollte mich nicht extra in einem "Webentwicklungsforum" wegen diesem einen Problem anmelden/registrieren...
Ich habe in meinem Template sozusagen drei Boxen (container, box1, box2). Als framework verwende ich bottle (was aber nichts mit dem Problem zu tun hat). Angeregt wegen diesem Thema hier bin ich nun dabei, meine Seite umzubauen.
Das mir nicht verständliche Problem ist nun, dass beim Verkleinern der Seite mir das div tag "box2" aus dem tag container springt. Ich würde es gerne so hinkriegen, dass sich die box2 unterhalb der box1 ausrichtet und container sich in der Höhe vergrössert bzw der neuen Situation anpasst.
Code: Alles auswählen
<html>
<head>
<style type="text/css">
body {
/*color:#aeaeae; */
background: #3f3f3f;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
}
.container {
max-width:960px;
color: #fff;
background-color:#000;
min-height:304px;
border: 1px solid #B5FF00;
}
.box1 {
float: left;
max-width: 458px;
height: auto;
padding: 5px;
margin: 5px;
border: 1px solid #B5FF00;
}
.box2 {
float: right;
max-width: 458px;
padding: 5px;
border: 1px solid #B5FF00;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">
-->INHALT<--
</div>
<div class="box2">
-->INHALT<--
</div>
</div>
</body>
</html>Code: Alles auswählen
@media screen and (max-width: 700px) {
.box2 {
float:left;
}
}
@media only screen and (max-width : 480px) {
.box2 {
float:left;
}
}
@media only screen and (max-width : 320px) {
.box2 {
float:left;
}
}
