Flex container verändert die Position wenn Text verändert wird..

[Prgrmmrgrl]

Hallo Zusammen,

ich habe eine Seite erstellt in der sich drei flex Container befinden, zwei die oberen sind nebeneinander platziert und auch schon richtig ausgerichtet und ein weiterer liegt unter dem ersten container.

Im rechten Container ist Text platziert, das klappt soweit ganz gut bis ich aber den vorhandenen Text bearbeiten will und nur ein <br/> (das unter den zwei <p>) einfüge dann verändert der Container die Position bzw. margin-left extrem obwohl es nirgendwo festgelegt ist..

HTML:

<div class="flex-container2">
<div class="img-responsive"><a href=""><img alt="Endlos-Faltkarte" src="{{media url="wysiwyg/pb_faecherkarte_TEMPLATE.jpg"}}" /></div></a>
</div>

<br />

<div class="video-container">
<iframe src="https:// Youtube Link" style="margin-top:0px; border: 0px;"></iframe>
</div>

<br />

<div class="flex-container-text">
<div class="flex-item-text">
<div class="product-view-h1">Fächerkarte</div><br/>
In allen erdenklichen Formaten, als Hoch-, Querformat oder quadratisch produzierbar. Die Anzahl der Fächerstreifen können wir Ihren Bedürfnissen anpassen.
<p>
<p>
<br />
<strong><p style=" font-size: 20px"> ALLGEMEINE PRODUKTINFORMATIONEN</p></strong>
Alle DRUCKIDEEN.-Produkte werden standardmässig im 4-Farbdruck produziert. Auf <u><a href="kontakt.html">Anfrage</a></u> bieten wir den Druck mit Sonderfarben und zusätzlichen Veredelungsmöglichkeiten an.
<p>
<strong>Für all unsere DRUCKIDEEN.-Produkte können Sie gerne unseren individuellen Gestaltungsservice in Anspruch nehmen. Ein umfassender Daten-Check ist inklusive.
</strong> (mehr Informationen dazu finden sie <u><a href="service.html">hier</a></u>).</strong>
<p>
<p>
<strong><p style=" font-size: 20px"> SIE HABEN INDIVIDUELLE SONDERWÜNSCHE?</p></strong>
<u><a href="kontakt.html">Anfrage</a></u> für <strong>Sonderformate</strong> oder <strong>höhere Auflagen</strong>
<u><a href="kontakt.html">Anfrage</a></u> zum <strong>Gestaltungsservice</strong>
</div>

<center><div class="btn-anfr" style="width: 250px;">Jetzt anfragen!</div></center>

</div>


CSS:

.flex-container2 {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding-bottom: 20px;
padding-right: 0px;
z-index: 2;
float: left;
clear: left;
margin-top: 0px;
vertical-align: middle;
}



.img-responsive {
border-style: solid;
border-width: 0px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
width: 100%;
max-width: 500px;
height: auto;

}

.video-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding-bottom: 20px;
z-index: 2;
float: left;
clear: left;
margin-top: 0px;
width: 100%;
max-width: 500px;
height: 242px;
margin-right: 200px;
margin-bottom: 20px
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
border-style: solid;
border-width: 0px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
}


.flex-container-text {
display: flex;
flex-wrap: wrap;
padding-left: 20px;
margin-top: -40px;
border-style: solid

}


Ich hoffe sehr es kann mir jemand helfen!
Danke im Voraus!

LG

 

[Prgrmmrgrl]

Ok das habe ich mir gedacht.
Kannst du mir dazu etwas mehr Informationen geben?
Wie kann ich die flex Container sonst ausrichten dass sie genau in der Reihenfolge wie auf dem Screenshot platziert sind ohne Float?

Lieben Dank!

 

[Prgrmmrgrl]

Super vielen Dank!

Dann hätte ich noch eine Frage wie kann ich den Abstand zwischen .left und .right verringern ohne, dass die Anordnung mobil nicht zerstört wird?

Nachtrag: Sobald ich meinen Text in die von dir vorgesehenen <p>text</p> einfüge Ordnet sich der Container unter dem Video ein :(

 

[Prgrmmrgrl]

Dazu paar Infos, im CSS wenn ich das unter body lasse zerschießt es mir das ganze Seiten-Layout. Habe deshalb .div verwendet (ob es richtig ist leider keine Ahnung)..

Die im HTML festgelegten Design-Einstellungen muss ich leider so übernehmen. Oder ist es besser die im CSS festzulegen?

Ich danke dir vielmals!

Edit fiddle - JSFiddle

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

 

[Prgrmmrgrl]

Danke!

Die Klammern um das Bild müssen leider sein, da es sonst nicht angezeigt wird in dem System das ich verwende.

Es sieht aber jetzt so aus wie ich haben muss. Mobile Ansicht stimmt jedoch noch nicht ganz, der Container mit dem Text ordnet sich nicht unter dem Video ein?

 

[Prgrmmrgrl]

Ich danke dir vielmals für deine Hilfe! Seite funktioniert wie gewollt!

Danke Danke Danke