aside-section-aside alle 3 nebeneinander

[djleitno]

Hallo

Ich bin noch anfänger im bereich HTML und CSS und wollte mal eine Website machen wo links eine aside, in der mitte eine Section und rechts noch eine aside ist aber bin da auf ein Problem gestosen und zwar wenn ich sage

#aleft
{
    width:150px;
    height:500px;
    border: solid black;
    float:left;
    background-color: green;
}

#section1
{

    border: solid black;
    background-color: red;
    float:left;
    height: 500px;
    overflow:scroll;
}

#aright
{
    float:right;
    width:150px;
    border: solid black;
    background-color: green;
    height:500px;
}

dann wird bei der section der rote Hintergrund nur soweit angezeigt wie weit auch der text geht.
Hier ein screen um es besser zu verstehen




Was kann ich da machen das die section und ihr roter hintergrund die volle breite von 640px bekommt??
Ich hab da schon versucht width:640px; und min-width:640px;

hoffe ihr könnt mir helfen

MfG Lukas

 

[Wustersoss]

Hallo,

Nimm doch mal bei deinem Section-ID das float heraus und stelle width auf auto.

 

[djleitno]

Ne da rutscht die Rechte aside nach unten aber ich hätte die gerne neben der section.

 

[Wustersoss]

Tausch die beiden Divs in deinem HTML-Code aus. Das heisst Section muss nach Div aright im Code stehen.

 

[djleitno]

Ah vielen dank jetzt gehts

Aber warum muss das so sein?? ist irgendwie unlogisch

 

[Wustersoss]

Nein ist es nicht. Du schiebst ein Container(so nenne ich die DIVs) mit einem float left nach links, dass heisst das alles andere rechts um den linken Container angeordnet wird. Hast du ja selbst festgestellt.
Den nächsten Container schiebst du mit einem float right nach links. Für diesen Container gilt das gleiche wie für den ersten, nur in umgekehrte Richtung. Also alles was nachkommt muss links um den rechten Container angeordnet werden.

Du hast also 2 Container, einen links und einen rechts. Beide Container haben eine feste Breite. In der Mitte ist jetzt eine Lücke. In diese Lücke platziert sich der mittlere Container solange genug Platz durch das Fenster gelassen wird. Schiebt man das Fenster soweit zusammen das beide äussere Container sich berühren, hat der mittlere keinen Platz mehr um dort zu erscheinen und wandert automatisch nach unten unter die beiden seitlichen Container. Verhindern kann man das in dem man dem mittleren Container eine mindestbreite (min-width) mitgibt.

Alles verstanden?

 

[djleitno]

achso ja klingt jetzt wo dus so sagst doch logisch

Vielen dank für diese erklärung