nicht angemeldet
Zwei Divs Nebeneinander und Untereinander
0 0 0 0 0 
Gunnar Bittersmann
Zwei Divs Nebeneinander und Untereinander
Hallo,
ich hätte gerne zwei Div Container haben, mit der Eigenschaft, dass wenn die Seite unter 1000px Breit ist sie untereinander sind, und wenn die Seite Größer als 1000px ist nebeneinander. In Beiden Varianten möchte ich, dass sie Mittig sind, also wenn sie nebeneinander sind, soll der Abstand zwischen ihnen und rechts und links davon gleich sein.
Ich hab mir das ungefähr so gedacht:
<div style="border:dotted;min-height:500px;padding:0 20% 0 20%">
<div style="background:#256;width:500px;float:left">
TextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextvvvv TextTextTextTextText
</div>
<div style="background:#896;width:500px;float:right">
TextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextvvvv TextTextTextTextText
</div>
</div>
Hier sind die Boxen aber jeweils nicht Mittig.
Gibt es da eine Lösung für?
-
Grüße,
Gibt es da eine Lösung für?
- CSS gehört in CSS
- ja, "float", lies mehr bei selfhtml.org
MFG
bleicher
-
Grüße,
Gibt es da eine Lösung für?
- CSS gehört in CSS
- ja, "float", lies mehr bei selfhtml.org
MFG
bleicher
Lol
-
Grüße,
Lol
applefan, du
letzter denkanstoß - das zentrieren und das fließverhalten müssen nicht unbedingt durch die 2 divs alleine übernommen werden.
MFG
bleicher-
Grüße,
Lol
applefan, du
letzter denkanstoß - das zentrieren und das fließverhalten müssen nicht unbedingt durch die 2 divs alleine übernommen werden.
MFG
bleicherAlso ich würde mich wirklich freuen, wenn du das genauer erklären könntest.
Mit<div style="margin:auto">oder<center>klappt es jedenfalls nicht.-
Grüße,
zentriere deine 2 divs in 2 container divs die komplett je 50/50 die breite annehmen, knifflig kann die gleichheit der abstände seiten/zwischen divs werden - mti zentrieren werden die ja 1/1+1/1 verteilt, aber du kanst mit der breite/margin spielen, sodass die abstände 1/0|1/1 verteilt werden.
MFG
bleicher-
Die Breite von dem großen Div in dem beide Elemente sind, soll Variabel sein.
Wenn ich die beiden Elemente in zwei container divs packe die beide jeweils
50% breit sind, kommt es ja nie zu der Situation, dass ich einen Umbruch habe?
-
-
-
-
Om nah hoo pez nyeetz, iwasherefirst!
Vielleicht möchtest du auch einfach nur einen mehrspaltigen Text?
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, iwasherefirst!
Vielleicht möchtest du auch einfach nur einen mehrspaltigen Text?
Matthias
Danke für den Tipp, aber die Spaltenumrüche, und das wäre ja für mich das Sinnvolle daran, werden momentan nicht von den Browsern unterstützt.
-
-
Om nah hoo pez nyeetz, iwasherefirst!
also wenn sie nebeneinander sind, soll der Abstand zwischen ihnen und rechts und links davon gleich sein.
Das halte ich mit CSS für unlösbar.
<div> <div>...</div> <div>...</div> </div>scheint eine Div-Suppe zu werden vielleicht gibt es passendere Elemente, möglicherweise könnte das äußere der <body> sein.
den beiden inneren gibst du minimale sowie eine maximale Breite und floatest eines. in das äußere möchtest du float-boxen einschließen (=Suchbegriff). Das äußere bekommt
margin: 0 auto;und keine Breitenangabe, center ist deprecated.Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Matthias Apsel!
Das halte ich mit CSS für unlösbar.
abgesehen von calc()
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Matthias Apsel!
Das halte ich mit CSS für unlösbar.
abgesehen von calc()
Matthias
Vielleicht kann man es mit Listen mache?
Die Tun zumindest schon fast genau das was ich will:<div style="border:dashed"> <ul style="list-style-type: none;"> <li style="float: left;width:300px;"> Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 <li> <li style="float: left;width:300px;"> Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 <li> </ul> </div>Probleme hier sind nur:
1. Der umgebene Divcontainer erkennt die Liste nicht als Content, sobald ich
den <li> 's die Eigenschaft float:left gebe,2.Die Liste ist nicht mittig :(
-
Sorry fürs Multiposting ( Kann man hier eigentlich Post bearbeiten?)
Ich hab jetzt fast eine Lösung, es fehlt nur noch mittig :
<div style="border:dashed"> <ul style="list-style-type: none;"> <li style="float: left;width:300px;"> Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 <li> <li style="float: left;width:300px;"> Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 <li> <li style="clear:both"></li> </ul>-
Hi,
jetzt hast du zwei Elemente nebeneinander, die mittig zu bekommen ist kein großer Akt.
Aber wolltest du nicht den gleichen Abstand den ein Element zum rand hat auch zwischen den Elementen?Editieren geht nicht.
Übrigens kannst du div genauso stylen wie li.
~dave
-
Hi,
jetzt hast du zwei Elemente nebeneinander, die mittig zu bekommen ist kein großer Akt.
Aber wolltest du nicht den gleichen Abstand den ein Element zum rand hat auch zwischen den Elementen?Editieren geht nicht.
Übrigens kannst du div genauso stylen wie li.
~dave
Also es wäre auch okay, wenn es einen festen Abstand zwischen beiden Elementen gäbe, also das der Abstand zwischen den beiden nicht notwendig flexibel ist.
Geht es denn einfach, dass beide Version Mittig sind, also egal ob sie Untereinander sind oder Nebeneinander?-
@@iwasherefirst:
nuqneH
Also es wäre auch okay, wenn es einen festen Abstand zwischen beiden Elementen gäbe, also das der Abstand zwischen den beiden nicht notwendig flexibel ist.
Das vereinfacht die Sache.
Media-Queries entfallen,
body { text-align: center }gilt immer. Die Boxen bekommen links und rechts den gleichen Außenabstand.Das Stylesheet sieht dann nur noch so aus:
body { text-align: center; } p { background: #042; color: white; display: inline-block; padding: 1em; margin-left: 42px; margin-right: 42px; text-align: left; vertical-align: top; width: 200px; }Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
Om nah hoo pez nyeetz, iwasherefirst!
Vielleicht kann man es mit Listen mache? Die Tun zumindest schon fast genau das was ich will:
falscher Ansatz. Bestimme die Art der Elemente nach den Inhalten, die sie enthalten.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, iwasherefirst!
Vielleicht kann man es mit Listen mache?
Die Tun zumindest schon fast genau das was ich will:falscher Ansatz. Bestimme die Art der Elemente nach den Inhalten, die sie enthalten.
Matthias
Ich habe zwei <div > Objekte in denen der Text steht, und jetzt stecke ich die <divs> in eine Liste, damit sie manchmal nebeneinander und manchmal untereinander stehen - wo ist das Problem?
-
Om nah hoo pez nyeetz, iwasherefirst!
Ich habe zwei <div > Objekte in denen der Text steht, und jetzt stecke ich die <divs> in eine Liste, damit sie manchmal nebeneinander und manchmal untereinander stehen - wo ist das Problem?
Es lassen sich alle Elemente so formatieren, dass sich so verhalten, wie du es wünschst, auch die, die semantisch passen. <div> ist ein allgemeines Element, vielleicht ist <section> oder <p> passender. Listen sind geordnete oder ungeordnete Aufzählungen.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-
@@Matthias Apsel:
nuqneH
also wenn sie nebeneinander sind, soll der Abstand zwischen ihnen und rechts und links davon gleich sein.
Das halte ich mit CSS für unlösbar.
Ich nicht.
vielleicht gibt es passendere Elemente, möglicherweise könnte das äußere der <body> sein.
Möglicherweise könnte der Konjunktiv unangebracht sein.
und floatest eines.
Nö, keines.
Im IE 9 funktioniert es (der 8er kennt noch keine Media-Queries):
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"/> <title>TEST</title> <style> [code lang=css]p { background: #042; color: white; display: inline-block; padding: 1em; text-align: left; vertical-align: top; width: 200px; } @media screen and (max-width: 500px) { body { text-align: center } } @media screen and (min-width: 501px) { body { text-align: justify; text-align-last: justify } body::before { content: "\200B " } body::after { content: " \200B " } }</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>[/code]Wäre schon, wenn die anderen Browserhersteller auch endlich mal aus dem Ar^WTee kommen würden und 'text-align-last' implementierten.
Wenn man die U+200B ins Markup schreibt (pfui), steht 'body::after' anderweitig zur Verfügung. Dann sollte es mit dem Trick browserübergreifend funktionieren.
Qapla'
PS: Die Breitenangaben hab ich mal so gewählt, dass man keinen überbreiten Monitor haben muss, um in den Genuss zu kommen, was zu sehen.
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
@@Matthias Apsel:
nuqneH
also wenn sie nebeneinander sind, soll der Abstand zwischen ihnen und rechts und links davon gleich sein.
Das halte ich mit CSS für unlösbar.
Ich nicht.
Auch bei dir sind die drei Abstände nicht gleich groß.
Matthias
--
1/z ist kein Blatt Papier.
-
@@Matthias Apsel:
nuqneH
Auch bei dir sind die _drei_ Abstände nicht gleich groß.
Ich hab mir gespart, margin/padding von html/body auf 0 zu setzen.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Auch bei dir sind die drei Abstände nicht gleich groß.
Ich hab mir gespart, margin/padding von html/body auf 0 zu setzen.
Entweder haben wir sehr unterschiedliche Vorstellungen von gleichen Abständen oder wir reden aneinander vorbei. Bei mir sind beide <p> am linken oberen Rand und haben unabhängig von der Fensterbreite (> 501) denselben Abstand zueinander. Ich hatte den Op so verstanden dass alle drei Abstände den Wert (breite_view_screen - 2 * breite_p)/3 haben sollen.
Matthias
--
1/z ist kein Blatt Papier.
-
@@Matthias Apsel:
nuqneH
Bei mir sind beide <p> am linken oberen Rand
Bei dir heißt in welchem Browser? Hast du „Im IE 9 funktioniert es“ überlesen?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Hast du „Im IE 9 funktioniert es“ überlesen?
offensichtlich, hier allerdings auch nicht die Möglichkeit des Testens (XP).
Ich habe es allerdings schon garnicht als „Nur im IE 9 funktioniert es“ gelesen.
Matthias
--
1/z ist kein Blatt Papier.
-
@@Matthias Apsel:
nuqneH
Ich habe es allerdings schon garnicht als „_Nur_ im IE 9 funktioniert es“ gelesen.
Das „Nur“ war in „Wäre schon, wenn die anderen Browserhersteller auch endlich mal aus dem Ar^WTee kommen würden und 'text-align-last' implementierten“ implizit enthalten. ;-)
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
-
-
-
