Abstand von Block Containern mit Float-Inhalt

html.de-Forum HTML, XHTML & CSS
1

Hallo,
ich schaffe es einfach nicht, im gelieferten Beispiel einen Abstand zwischen #oben und #unten zu bekommen, ohne das auskommentierte Element #abstand einzufügen. Die Margins bei #oben und #unten verpuffen, so lange der Text in #rechts nicht über das float-div #links hinausgeht.

Ich möchte den Abstand definieren, ohne extra ein #abstand-Div einzufügen

[HTML]

CSS Test #oben { background-color:yellow; min-height:100px; margin-bottom:50px;} #unten { height: 100px; background-color:grey; clear:both; margin-top:50px;} .clear { clear:both; } .links { float: left; height:200px; width:150px; background-color:red } .rechts { background-color:blue}
Bild-Ersatz

Text im DIV oben
Text im DIV oben
Text im DIV oben

Das untere DIV
[/HTML]
2

Ändere deinen Code einfach so:
[HTML]

CSS Test #oben { background-color:yellow; min-height:100px} #unten { height: 100px; background-color:grey; clear:right; margin-top:150px;} .clear { clear:both; } .links { float: left; height:200px; width:150px; background-color:red } .rechts { background-color:blue}
Bild-Ersatz

Text im DIV oben
Text im DIV oben
Text im DIV oben

Das untere DIV
[/HTML] Ich habe dem #unten ein clear:right; gegeben, mehr war das nicht. Du musst den margin-top allerdings um die height von #unten vergrößern. Soll heißen: Wenn #unten eine height von 100px hat, muss das margin-top 100px + gewollter margin betragen. Du willst einen margin-top von 50px, also ist margin-top: 150px. Hier ein jsfiddle: https://jsfiddle.net/oououexw/ Gruß WebNetCode
3

Hallo

Du berücksichtigst nicht dass durch das float die betroffenen Container aus dem Elementenfluß genommen werden. Eine ausführliche Info dazu gibt es zum Beispiel unter

http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

Gruss

MrMurphy

4

@WebNetCode. Sorry aber deine Lösung bringt mir nichts. Das war ja nur eine Beispiel, um das Problem zu schildern, normalerweise kenne ich die Größe #unten ja nicht, ich hätte sie also auch im Beispiel weglassen können.
@MrMurphy In dem Artikel steht

clear:both;zuweisen? Dann wird der obere Rand der mit clear versehenen Box soweit ausgedehnt, bis diese Box unterhalb des floatenden Elements angeordnet werden kann

Das habe ich ja auch im Beispiel beobachtet, mein #unten ist unterhalb von #links. Aber leider schlägt die Marging nicht zu und wird nicht zur Ausdehnung hinzugefügt. Die Margin#unten bezieht sich offenbar auf den nicht floatenden Text. Erst durch Einfügen des zusätzlichen #abstand kommt Margin#unten als Abstand zum nicht floatendem #abstand zum Tragen.
Ich komme also ohne den #abstand nicht zum Ziel, oder?

5

Hallo

Ich komme also ohne den #abstand nicht zum Ziel, oder?

Doch, es gibt verschiedene Möglichkeiten. Deren Einsatz hängt aber von dem kompletten Aufbau der Seite ab.

Du könntest in dem Beispiel #oben zum Beispiel durch das hinzufügen von overflow: hidden; zu einem BFC (Block-Formatting-Context) machen.

Zusätzlich musst du natürlich auch die „Collapsing Margins“ beachten.

Insgesamt wäre es natürlich sinnvoller das Flexbox-Modell zu verwenden. Das ist schließlich genau für solche Layouts entwickelt worden und wird immer automatisch in den betroffenen Container eingeschlossen.

Gruss

MrMurphy

6

Hallo MrMurphy,

nach deinem Hinweis auf den mir neuen Begriff Flexbox-Modell habe ich mir mal die Einführung https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/ angesehen, aber das gefällt mir für meinen momentanen Bedarf an dieser Stelle auch nicht. Ich bin dabei, meine Seite mittels Bootstrap umzuschreiben und da hat man ja dieses Grid-Layout. Das passt für vieles auch, nicht aber in der folgenden Situaition wie oben:

Ich habe auf der einen Seite ein relativ schmales Bild und daneben beschreibenden Text. Beim Grid Modell habe ich dann mit relativ viel Text beim Verkleinern der Seite das Problem, dass in der Spalte unter dem Bild viel Platz ungenutzt bleibt oder ich habe das schmale Bild oben und den Text darunter. Also den Text um das Bild Floaten wäre schon genau das richtige, zumal mit der Klasse img-responsive das Bild bei Bedarf zusätzlich verkleinert würde. Aber beim Flex-Modell muss ja eine Box feste Breite haben (also in meinem Fall das Bild) und damit wäre das nicht mehr responsive, der Browser könnte die Seite nicht mehr gleichmäßig zoomen.

Damit nehme ich wohl den Vorschlag overflow: hidden her :), danke. Der macht genau was ich wollte, nämlich die Höhe von #oben auf die Höhe von #links ausdehnen und damit schlägt das Margin wieder korrekt zu.

7

Nö, muss sie nicht. Schau dir mal das Flex-Grid hier an:
https://material.angularjs.org/latest/demo/gridList

8

Hallo Tronjer,
dein Hinweis scheint aber ein anderes Framework zu verwenden als das von mir nun ausgewähltes Bootstrap. Ausgewählt habe ich es, weil es mir hier nach einer Frage wärmstens ans Herz gelegt wurde und die meisten Anforderungen hat es bisher auch erfüllt. Ich habe nun eine für mich ausreichende Lösung und will nun nicht den Ehrgeiz entwickeln, diese noch zu optimieren und Teile des Angular Framework nachbilden. Es ist immer wieder irre, wieviel man lernt und dabei merkt, dass man immer nur an der Oberfläche rumkratzt und man nur sieht, wie wenig man doch weiß.
Grüße, Rainer

9

Mit Bootstrap geht es auch. Allerdings benötigst du bei float-basierten Grids ein Plugin, wenn die Container vertikal aneinandergrenzen sollen, ohne dass sich hässliche Abstände ergeben.

http://isotope.metafizzy.co/layout-modes/masonry.htm

10

Ahh das ist gut, dann werde ich mich darum mal kümmern, wenn das Gröbste geschafft ist und es an die Feinarbeit geht. Danke für den Tipp, aber der Link meldet Page not Found, besser scheint http://isotope.metafizzy.co/v1/ zu sein, auf den er verweist

11

Reicht es nicht so? (Alternative zu overflow:hidden)

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CSS Test</title>
<style>
#oben {
background-color:yellow;
min-height:100px;
float:left;
width:100%;
margin-bottom:50px;
}

#unten {
height: 100px;
background-color:grey;
clear:both;
}

.links {
float: left;
height:200px;
width:150px;
background-color:red;
}

.rechts  {
background-color:blue;
margin:0 0 0 150px;
padding:0;
} 

</style>
</head>
<body>
  <div id="oben">
  <div class="links">Bild-Ersatz</div>
  <p class="rechts">
  Text im DIV oben <br/>
  Text im DIV oben <br/>
  Text im DIV oben
  </p>
  </div>

  <div id="unten">
  Das untere DIV
  </div>
</body>
</html>
12

Hallo DJ Heke,
du hast den ganzen oberen Container als float:left gekennzeichnet und das hat (zumindest grafisch und auf den ersten Blick) den gleichen Effekt wie das vorher vorgeschlagene Overflow. #oben hat nun die volle Höhe wie #links und damit kommen die Margins wieder wie gewünscht zum Tragen. Aber sobald der Text #rechts mehr wird, bleibt er auch rechts und umfließt #links nicht mehr. Meine hier nochmals aufgeführte Anforderung wird also leider nicht erfüllt.

13

na dann nimm doch bei .rechts das margin wieder raus. Habe ich nur so eingefügt.(weil nicht genau gelesen)

14

Das hatte ich auch nicht gesehen und ohne klappt es in der Tat auch wie gewünscht. Danke

15

Bootstrap hat doch eigene Helper dafür:
[HTML]

[/HTML]
16

Ja mit denen klappt das auch :slight_smile: und damit habe ich den Vorteil, keine eigenen Klassen mehr definieren zu müssen. Ich bekam das Problem eigentlich nur, weil ich vom alten

-Layout weg wollte, aber die Funktionen an manchen stellen mochte. Nun wollte ich wissen, wie Bootstrap das macht und siehe da, es ist etwa so

.clearfix { display: table; }

Ich verkneife mir nun jeden Kommentar über die hier im Forum oft gemachten Bemerkungen zu Tabellen. Aber wundern darf ich mich schon, wenn man sie an den Pranger stellt und dann doch irgendwie durch die Hintertür wieder einführt o_O. Klar, es sieht besser aus

[CODE]


…

[/CODE] als [CODE]
...
[/CODE] aber irgendwie kommt das gleiche dabei heraus
17

Die Bemerkungen beziehen sich auf HTML-Tabellen (

), die zu Layout-Zwecken „mißbraucht“ werden, aber nicht CSS-Tabellen (display:table, display:table-cell, usw).

18
19

Falsch.

display:table „generiert“ keine vollständige Tabellenstruktur, wie von Dir gezeigt, sondern weist lediglich das formatierte Element an, sich wie das

-Element zu verhalten - nicht mehr.

Wie Du das für Dich einordnest, eine konventionelle HTML-Tabelle mißbrauchen / zweckentfremden ja oder nein, bleibt Deine freie Entscheidung.

20

Stimmt, wenn man sich die erzeugte DOM Struktur ansieht, dann sind die Unterschiede in der Tat gewaltig, insbesondere da dann manchmal zusätzlich auch noch und erzeugt werden, auch wenn man die nicht explizit definiert.