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

[ERLEDIGT] 2 Textblöcke nebeneinander anordnen

K

Kyorax

Guest
Hallo Community,
ich habe eine leicht klingende Frage, die mir bei einem Websiteprojekt dennoch Schwierigkeiten liefert:

Ich möchte einfach nur 2 Textblöcke nebeneinander anordnen. Versucht habe ich das schon mit Tabellen, wobei dann plötzlich die Textausrichtung in einer Spalte anders war und sich nicht umstellen ließ, mit <div>s denen ich verschiedene Größen zuteilte aber nicht nebeneinander und nicht untereinander bekam (float hat mich da enttäuscht).

Hat jemand eine Idee wie man dieses einfache Problem lösen kann?
Was mache ich falsch?

Danke im Voraus.
 
Werbung:
also ich schreibe hier einfach nochmal den betreffenden "Baustein" neu:
HTML: 
<center>
<div style="width: 65%;  text-align: left;">

<div style="width: 32.5%; float: left;">
</div>

<div style="width: 32.5%;float: right;">
</div>

</div>
</center>
 
Werbung:
Da du nicht beschreibst, was dabei das Problem ist, alle Prozentangaben zusammen aber mehr als 100% sind, nehme ich mal stark an, dass die Box mit 65% über den beiden anderen sein soll, die dann nebeneinander stehen sollen und alles zusammen zentriert mit einer gesamtbreite von 65%.
Richtig?
Dazu sei gesagt: Solange ein Float nicht gecleared wird, reihen sich alle weiteren floats daneben auf. Sollte meine obige Annahme stimmen, ist ein Float auf dem oberen Container auch nicht nötig.

Vermütlich warst du auch enttäuscht darüber, dass deine beiden kleinen Boxen links und rechts am Bildschirmrand klebten obwohl du sie mit dem (völlig veralteten) Center-Tag in die mitte zwingen wolltest.
Hierzu sei wiederum gesagt: Float nimmt elemente aus dem Fluss und geht und gibt ihnen eine Ausrichtung nach links oder rechts. eine Flussausrichtung bewirkt da logischerweise rein garnichts.

Der (wie gesagt veraltete) Center-Tag ist ein Block-Element und nimmt als solches automatisch 100% des Viewports ein, sofern man es nicht beschränkt. Darum flitschen deine Floats auch bis an den Rand
Das hat bei einem Center-Tag aber wenig sinnn, Da er als Blockelemet sich automatisch nach links ausrichtet, was ihn in seiner Funktion unbrauchbar machen würde, solange man um den Center-tag nicht noch einen weiteren macht, der den Center-Tag zentriert und so weiter und so weiter bis in alle Ewigkeit.

Hinzu kommt nebenbei noch, dass du eingangs von Textblöcken sprachst. ich sehe aber nur Div-Container die per Definition eigenschaftslose Hilfselemente sind.

Genug zur Theorie.
Nun der praktische Teil: Beispielseite zum nachfolgenden Code
HTML: 
<!DOCTYPE HTML>

<html>

<head>

<title>Testseite</title>

</head>

<!-- Das text-align wird für den IE bis v.8 gebraucht, da dieser "margin: 0 auto;" nicht versteht -->
<body style="text-align: center;">

<!-- Ein meist Wrapper genanntes Element, dass eine Anzahl anderer Elemente gruppiert, die eine gemeinsame Aufgabe erfüllen sollen. margin: 0 auto; bewirkt bei allen Browsern, außer dem IE bis v.8, eine Mittigstellung des Wrappers -->
<div style="width: 65%; margin: 0 auto;">

   <p style="background-color: red; margin: 0;">
   Ich bin ein P-Tag. Als Blockelemet, dass ich nunmal bin, brauche ich einen Inhalt, der mich in Form bringt oder eine Höhenangabe, damit ich nicht Unsichtbar bin.
   Ich habe die automatische Breite von 100% meines übergeordneten Elementes, welches 65% des verfügbaren Viewports entspricht und habe außerdem, zur Unterscheidung von den beiden kleinen unter mir, die Farbe Rot.
   </p>
  
   <p style="float: left; width: 50%; background-color: yellow; margin: 0">
   Ich bin ein auch ein links gefloateter P-Tag. Als Blockelemet, dass ich nunmal bin, brauche ich einen Inhalt, der mich in Form bringt oder eine Höhenangabe, damit ich nicht Unsichtbar bin.
   Ich nutze, dank meines Schöpfers, 50% der Breite meines übergeordneten Elementes und habe außerdem, zur Unterscheidung von meinen beiden Kollegen, die Farbe Gelb.
   </p>
  
   <!-- Dieser Block hat 0,01% weniger Breite als sein Nachbar.
   Ebenfalls eine IE-Maßnahme, da dieser es gerne schafft, dass 2x50% mehr als 100% sind.
   In der Folge verschiebt sich die Darstellung.
   Technisch gesehen ist "float: right;" hier garnicht zwingend nötig, da automatisch der verbleibende Platz, abzüglich der 50% des links gefloateten Elementes genutzt wird-->
   <p style="float: right; width: 49.99%; background-color: green; margin: 0">
   Ich bin ein rechts gefloateter ein P-Tag. Als Blockelemet, dass ich nunmal bin, brauche ich einen Inhalt, der mich in Form bringt oder eine Höhenangabe, damit ich nicht Unsichtbar bin.
   Ich nutze, dank meines Schöpfers, 49,99% der Breite meines übergeordneten Elementes und habe außerdem, zur Unterscheidung von meinen beiden Kollegen, die Farbe Grün.
   </p>
  
   <!-- Das nachfolgende Break-Element beendet beide Umflüsse.
   Diese können, alternativ zu both, auch einzeln mit left oder right gecleared werden -->
   <br style="clear: both;">
  
</div>

</body>

</html>
Ich hoffe das war aufschlussreicht. Hab lange genug daran rumgeschrieben :D
 
Vielen vielen Dank für die ausführliche Erklärung! :) Das hat mein Problem gelöst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben