nicht angemeldet
nebeneinanderstehende DIV´stehen nicht nebeneinander
Rolf b
marctrixHallo, liebe Leute, ich bin am Verzweifeln. So wie im Bild soll es aussehen. So sieht es aus: https://neu.arznei-telegramm.de/html/2016_12/htmlcontainer2.php3 Ich bekomme das DIV #mehr (grau) nicht an den rechten Rand vom blauen DIV. Nicht wundern, die Farben sind derzeit für mich nur als Hilfe gesetzt und werden wieder eliminiert.
Die zugehörige CSS, die sehr umfangreicht ist, weil die includierten Artikel darauf greifen: https://neu.arznei-telegramm.de/html/test.css
-
Hallo
Du musst das vorherige Element (div, welches in dem Quelltext weder id noch class hat) so schmal machen, dass das div#mehr noch daneben passt.
div sind Blockelemente, die in der Breite den gesamten zur Verfügung stehenden Platz einnehmen, wenn ihre Breite nicht durch CSS begrenzt wird.
Zudem verwendest du wohl float ohne dir über die Folgen bewußt zu sein. Deshalb solltest du dich auch über die Grundlagen von float informieren.
Gruss
MrMurphy
-
Danke fürs erste - ich probiere mal. LG
-
width: calc(100% - 200px)reicht nicht; man muss gefloatete Elemente vor den nicht gefloateten angeben, sonst stellen sie sich nicht daneben.Zweitens solltest Du dem #article div die Eigenschaft overflow:auto geben. Damit erreichst Du einen Blockformatierungs-Kontext und verhinderst, dass bei einem zu kurzen Artikel das float unten heraushängt.
Drittens ist die table-Formatierung im Hauptteil des Artikels nicht mehr state-of-the-art und auch gar nicht nötig, das kannst Du ganz normal mit einem div (äh, eher einer section) einrahmen und darin h2 und p untereinander setzen.
Viertens gibst Du die Breite des Hauptteils nicht mit 80% an, sondern durch einen calc Ausdruck, in dem Du die Breite des Seitenblocks von 100% abziehst. Die Leerstellen um das Minus sind obligatorisch!
Fünftens sollte dein #article div kein float bekommen, es floatet nicht sondern ist auf voller Breite.
Sechstens lässt sich dein Aside-Konstrukt vermutlich mit einer Flexbox eleganter lösen…
Siebtens - wenn Du schon <main> benutzt, dann gerne auch <header>, <section> und <aside> statt der diveritis von HTML 4.
Rolf
-
Hi Rolf, bzgl. der Tabelle die includiert wird, ist evtl. nicht viel zu machen. Das sind ca. 5.000 "alte" HTML-Seiten, die seit 1999 archiviert wurden und leider in dieser Konstruktion vorhanden sind. Auf jeden Fall großen Dank für deine Mühe. Ich setze mich jetzt hin und lerne … LG
-
Hej laufmasche,
[Layout mit float]
Ich setze mich jetzt hin und lerne …
Lerne flexbox. Ist einfacher. Vielleicht willst du ja auch, dass die beiden
divgleich hoch sind…Das derzeitige Layout kannst du (als Fallback) übrigens drinnen lassen - wird von flexbox überschrieben und steht dann alten Browsern, die flexbox nicht kennen zur Verfügung…
Wenn du dir das anschauen magst und Hilfe brauchst - einfach noch mal hier melden…
Marc
-
Danke erstmal - ich schaue mir das an. Laufmasche
-
-
-
Lieber Rolf, ich würde Dir jetzt gern einen Kaffee ausgeben. Ich glaub, jetzt krieg´ ich es hin. Herzlichen Dank. LG
-
-