• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3 Div-Container nebeneinander

Jonathan_Pukas

Neues Mitglied
Hey Leute, ich habe folgendes Problem.


Ich habe mittig ein großen div Container, welcher Inhalte enthält. Nun möchte ich rechts und links daneben noch jeweils zwei schmalere Container erstellen. Bei mir werden die aber immer nur dadrunter angezeigt! Mit float left und float right habe ich es schon probiert, aber wenn ich rauszoome, "löst sich die ganze website auf", weil ich dem rechten container einen abstand zum rechten rand zugewiesen habe, den er dann natürlich einhalten muss.

Könnt ihr mir helfen?
 
Werbung:
ich denk mal du hast über all pixel angaben gemacht mit % angaben ist das Problem glaub ich zu lösen also sagen wir mal anstatt 16px 1% oder sowas

weil dann der Inhalt auch mit wächst und so die die Div container auch Größer werden wenn einer einen größeren Bildschirm hatt und so sieht die Webseite immer gleich aus bis auf die größe und du solltest vielleicht noch die schrifftgröße in em angeben
 
Wie wärs mit dieser lösung?

HTML:
<div id="wrapper">
  <div id="sideOne">seite Eins</div>
    <div id="smallWrapper">
      <div id="mainText">main Text</div>
      <div id="sidetwo">Seite zwei</div>
    </div>
  <div id="footer"></div>
</div>

HTML:
#wrapper {
    background-color:#FFFFFF;
    widht:80%;
    height:100%;
    margin:0 auto;
}

#sideOne {
    background-color:#FF0000;
    width:20%;
    height:95%;
    float:left;
}

#smallWrapper {
    background-color:#FF00FF;
    width:80%;
    height:95%;
    float:right;
}

#mainText {
    background-color:#00FF00;
    width:80%;
    height:100%;
    float:left;
}

#sideTwo {
    background-color:#FFFFFF;
    width:20%;
    height:100%;
    float:right;
}

#footer {
    background-color:#0000FF
    width:100%;
    height:5%;
    clear:both;
}

//Mit dem Wrapper hälst du das ganze Gebilde kompakt zusammen ich hab ihm hier noch ein margin:0 auto gegeben um ihn in die mitte des Viewports zu bringen

//SideOne wird mit float left an die linke seite des Wrappers gedrückt

//smallWrapper wird mit float right zuerst mal an die rechte seite des Wrappers gedrückt des weiteren beinhaltet der smallWrapper noch den mainText und sideTwo

//mainText hier kommt dann der Hauptteil hin der Container wird mit float left an die linke Seite des smallWrappers gedrückt

//sideTwo der 2. platzhalter wird mit float right an die rechte Seite des smallWrappers gedrückt

//dem footer wird zu guter letzt noch ein clear both gegeben damit die floatings wieder aufgehoben werden

//alle angaben sind in prozent und beziehen sich jeweils auf das eltern element d.h. wrapper ist 80% vom HTML (viewport); sideOne ist 20% vom wrapper; smallWrapper ist 80% vom wrapper; mainText ist 80% vom smallWrapper; sideTwo ist 20% des smallWrapper;

//die height angaben funktionieren auf die gleiche art und weise

LG devilseye
 
Werbung:
Zurück
Oben