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

Abstand von Block Containern mit Float-Inhalt

NetAktiv

NetAktiv

Senior HTML'ler
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: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>CSS Test</title>
    <style type="text/css">
        #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}      
    </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="abstand" class="clear"></div>-->
   <div id="unten" class="clear">
        Das untere DIV
   </div>
</body>
</html>
 
Werbung:
Ändere deinen Code einfach so:
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>CSS Test</title>
    <style type="text/css">
        #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}   
    </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="abstand" class="clear"></div>-->
   <div id="unten" class="clear">
        Das untere DIV
   </div>
</body>
</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
 
Werbung:
@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
Zum Vergrößern anklicken....
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?
 
Hallo

Ich komme also ohne den #abstand nicht zum Ziel, oder?
Zum Vergrößern anklicken....

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
 
Zuletzt bearbeitet:
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.
 
Werbung:
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
 
Werbung:
Reicht es nicht so? (Alternative zu overflow:hidden)
Code: 
<!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>
 
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.
NetAktiv schrieb:
Also den Text um das Bild Floaten wäre schon genau das richtige,
Zum Vergrößern anklicken....
 
Werbung:
Bootstrap hat doch eigene Helper dafür:
HTML: 
<div class="clearfix">
  <div class="pull-left"></div>
  <div class="pull-right"></div>
</div>
 
Werbung:
Tronjer schrieb:
Bootstrap hat doch eigene Helper dafür ...
Zum Vergrößern anklicken....
Ja mit denen klappt das auch :) und damit habe ich den Vorteil, keine eigenen Klassen mehr definieren zu müssen. Ich bekam das Problem eigentlich nur, weil ich vom alten <table>-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
Code: 
.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: 
<div class="clearfix">
...
</div>
als
Code: 
<table><tr><td>
...
<td><tr></table>
aber irgendwie kommt das gleiche dabei heraus
 
NetAktiv schrieb:
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: 
<div class="clearfix">
...
</div>
als
Code: 
<table><tr><td>
...
<td><tr></table>
Zum Vergrößern anklicken....
Die Bemerkungen beziehen sich auf HTML-Tabellen (<table>), die zu Layout-Zwecken "mißbraucht" werden, aber nicht CSS-Tabellen (display:table, display:table-cell, usw).
 
Spicelab schrieb:
... beziehen sich auf HTML-Tabellen (<table>), die zu Layout-Zwecken "mißbraucht" werden...
Zum Vergrößern anklicken....
Man findet auch noch etwas exakter
Auf die Erstellung von Layouts mit Tabellen sollte verzichtet werden. Tabellen sollten nur für tabellarische Auflistung von Relationsdaten verwendet werden.
Zum Vergrößern anklicken....

Das ist aber doch sicher an vielen Stellen grenzwertig, was nun semantisch noch als Tabelle gilt. Kein Mensch wird bestreiten, dass das Anzeigen von Text-Datensätzen aus einer Datenbank in einer HTML-Tabelle völlig OK ist. Kein Mensch wird dann auch etwas sagen, wenn man eventuell noch 2 Datenbankfelder wie Vor/Nachname in einem <td> zusammenfasst. Das gilt ja wohl sicher auch, wenn das Result Set aus einer Liste von Links zu Bildern und deren Beschreibung führt. Dann sollte es aber doch auch OK sein, wenn man gleich statt der Links die Bilder mit Beschreibungen in einer HTML-Tabelle anzeigt, vor allem, wenn es sich nur um Thumbnails handelt. Was, wenn diese Liste von Kombination Link/Text nicht aus einer Datenbank kommt, sondern manuell eingegeben wurde. Es bleibt doch auch semantisch eine Tabelle. Schau dir mal mein noch nicht umgebaute als Tabelle aufgebaute Seite an http://rainer-rosenberger.de/x_reisen/index.php?page=deutschland. Die HTML-Tabelle kommt demnächst weg und wird durch die Konstruktion oben ersetzt. Ebenso werde ich beispielweise die Seite http://rainer-rosenberger.de/x_bilder/index.php?page=kochen_2015 durch das Bootstrap grid-Layout mit 4 Spalten ersetzen. Aber Grund ist nur, weil ich zum Responsive Design umsteigen will. Hier Tabellen als Layout-Tool zu verwenden macht mir keine Kopfschmerzen, weil ich die auch semantisch als Tabelle sehe.
 
Werbung:
NetAktiv schrieb:
aber irgendwie kommt das gleiche dabei heraus
Zum Vergrößern anklicken....
Falsch.

display:table "generiert" keine vollständige Tabellenstruktur, wie von Dir gezeigt, sondern weist lediglich das formatierte Element an, sich wie das <table>-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.
 
Spicelab schrieb:
display:table "generiert" keine vollständige Tabellenstruktur
Zum Vergrößern anklicken....
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 <thead> und <tbody> erzeugt werden, auch wenn man die nicht explizit definiert.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben