<div> soll anderes <div> verschieben, je nach Inhalt.

[Skandaloes]

Ich versuche mich ja schon seit einiger Zeit an HTML und CSS, und komme soweit auch damit klar.
Allerdings bin ich jetzt an einen Punkt angekommen wo ich einfach nicht mehr weiterweiß.
Und zwar folgendes...

<div id="content 1">
<p>Text</p>
</div>
<div id="content 2">
<p>Text</p>
</div>
<div id="content 3">
<p>Text</p>
</div>

Content 2 & 3 sollen fixen Inhalt bekommen.
Content 1 jedoch beinhaltet variablen Inhalt.
Mein Problem hierbei, Content 2 & 3 sollen immer unterhalb von Content 1 stehen und sich entsprechend anpassen/verschieben.
Und mir will ums verderben nicht einfallen, wie ich das am besten umsetze.

CSS hab ich folgendermaßen umgesetzt...

#content 1 {
    width: 500px;
    height: 700px;
    z-index: 5;
    left: 840px;
    top: 100px;
    background-color: #f8f8f8;
}
#content 2 {
    width: 400px;
    height: 5px;
    z-index: 4;
    background-color: #414141;
    left: 440px;
    top: 365px;
}
#content 3 {
    width: 500px;
    z-index: 8;
    left: 840px;
    top: 800px;
    font-size: 14px;
}

Hatte hier eigtl. auch position: absolute drin, weil es sonst alles zerhackt, bin aber bereits darauf gekommen das dies mein Vorhaben verhindert.
Trotzdem stehe ich grad tierisch auf der Leitung, hoffe Ihr habt den entscheidenden Tipp!

 

[Morpheus2200]

verstehe gerade nicht so genau, was du meinst...

so? A Pen by dread kopp

wenn es um variables verschieben geht, wirf mal einen blick auf flex boxes

A Pen by dread kopp

 

[Gubb3L]

Ich versteh dein Vorhaben noch nicht so ganz. Dein Content 1 hat eine fixe Hohe von 500px und einen Abstand top:100px. Auf welchen position Wert hast du das gesetzt ? Was steht in Content 1 drin und soll es immer die gleiche höhe haben oder sich dynamisch anpassen ?
Content 2 hat eine fixe Höhe von 5 und einen Z-Index Wert von 4. Würde also mit dem von dir genommenen Top Wert je nach position hinter Content 1 liegen.

Wenn Content 2 und 3 immer unter 1 liegen sollen und fixe Größen haben was meinst du dann mit "entsprechend anpassen/verschieben." ?

verstehe gerade nicht so genau, was du meinst...

so? A Pen by dread kopp

wenn es um variables verschieben geht, wirf mal einen blick auf flex boxes

An die Lösung hatte ich auch direkt gedacht aber das erschien mir doch iwie zu einfach

Alternativ kannst du das ganze noch an den Inhalt von Content 1 mit folgendem anpassen:
#content1 {
height:auto;
width:100%;
background-color:#EEE;
display:inline-block;
}

 

[Skandaloes]

Dann erstmal sorry fürs schlechte ummschreiben.

Der Inhalt in Content 1 ist auf jeder Unterseite verschieden, daher soll der Container dynamisch sein.
Content 2 soll nur ein grafisches Element beherbergen und in Content 3 soll ein Footer untergebracht werden.

Wenn ich jetzt in Content 1 Text einfüge, der normalerweise über Content 2 & 3 hinausragen würde, sollen diese beiden Container nach unten verschoben werden.
Ich hoffe das ist jetzt einigermaßen verständlich beschrieben, steh grad echt etwas auf der Leitung.

 

[Gubb3L]

Warum fängst du dann überhaupt Sachen an in verschiedene Ebenen (z-index) zu verschieben und unterschiedliche Pixelbreiten und überhaupt feste Pixel zu nutzen.

Unterglieder die Seite doch klar in 3 Bereiche. Header (Navigation und so weit), Content (da würde dann Content 1 und ggf. auch 2 rein kommen) und Footer (Content 3). Diese haben dann z.b. eine maximale Breite von sagen wir mal 1000px und width:100% damit sie nach untern auch noch skalieren. In Content würden dann die z.b. der Divcontainer 1(main-content) und 2(content-grafik) rein kommen. Beide bekommen width:100% womit sie sich an der verfügbaren Breite vom main Container ausrichten.
Keine z-indexe, keine festen Pixelwerte einsetzen sonst hat sich das mit der automatischen Anpassung ja schon wieder erledigt.

<div id="header">
  --> Navigation usw.
</div>
<div id="main">
      <div class="main-content">
             <p>Text-content1</p>
      </div>
      <div class="content-grafik">
            <p>Text-content2</p>
      </div>
</div>
<div id="footer">
      <div id="footer-content">
           <p>Text-content3</p> 
      </div>
</div>

Das ist jetzt alles nur schnell und nicht unbedingt HTML5 konform usw. Aber da die Basics dir scheinbar noch fehlen will ich dich damit jetzt nicht auch noch nerven.

 

[scrollt]

1. Nimm keine IDs um zu stylen. Das ist mehr so ein allgemeiner Tip
2. Deine IDs sind nicht valide. Du kannst da keine Leerzeichen drin haben
3. wenn content-1 variabel sein soll, darf er natürlich keine feste Höhe haben
4. top, left etc. funktionieren nur in relativen, absoluten und gefixten Elementen. Deine sind static, weil nix anderes definiert ist.

abgesehen davon verstehe ich nicht wirklich was du vorhast, dein Code sieht so aus, als ob es dir genauso ginge Nicht böse gemeint. Vielleicht kannst du das ja mal deine Vorstellungen scribbeln und als Bild anhängen?

 

[dont ScreaM]

Meinst du so was hier?
https://jsfiddle.net/DamianToczek/bzcp5cLv/
Naja wir müssen wissen was auch drin sein soll. Wo du es später erklärt hast was schon was anderes. Als im 1 Post.