Gutan Abend,
ich würde gerne ein layout basteln, welches auf dem body also im content bereich 4 boxen hatt. Quasi als Vroschau.
Nun sollte der Boxeninhalt (text), sobald das browserfenster kleiner wird sich einfach den platz nehmen. Das klappt auch, da ich kein height angebe, werden die boxen einfach in der höhe grösser und der text bekommt mehr platz.
Nun der "schwierige" teil. Ich hätte gerne dass alle boxxen auf allen 4 seiten ein margin von 10px haben.
Es sind jeweils 2 boxen übereinander angeordnet. Nun kommt das problem:
Sobald ich das heîght weglasse, und das browserfenster die grösse ändert vergrössert oder verkleinert sich auch der rahmen um die boxxen.
Gibt es eine möglichkeit den rahmen zu "forcen"?
Der container ist das ganze, in dem content div befinden sich die 4 boxxe - jeweils 2 übereinander.
#container{
height: 100%;
width: 100%;
padding-bottom: 100px;
background-color: #e1e0e1;
}
#content{
margin-top: 10px;
margin-left: 170px;
margin-right: 160px;
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
}
Boxxen:
#box1{
margin-left: 10px;
padding: 3px;
width: 48%;
height: 120px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #000000;
float: left;
}
#box2{
margin-right: 10px;
margin-left: 52%;
height: 120px;
padding: 3px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
#box3{
margin: 10px;
padding: 3px;
height: 500px;
width: 48%;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #000000;
float: left;
}
#box4{
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 52%;
padding: 3px;
height: 500px;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
Vielen Dank für jegliche Hilfe =)