CSS: DIVs überlappen mit float
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute verpassen
anschauliches bild
aufgehen
beispiel
boxen
code
container
eigenschaft
einnehmen
folgende weise code
http
linke container
links rechts code
opus
platz
platzierte container
rand
sogenannten box
url
vollkommen code
-
Hey zusammen,
Folgendes Problem: Ich habe auf meiner Seite zwei DIV-Container, die nebeneinander platziert werden sollen. Dabei soll der linke Container 70 Prozent der Gesamtbreite einnehmen, der rechte entsprechend 30%. Gelöst wird das ja im Normalfall mit der CSS-Eigenschaft "float", nämlich prinzipiell auf folgende Weise:
<div id="wrapper" style="width: 100%;"> <div id="links" style="width: 70%; float: left;"> </div> <div id="rechts" style="width: 30%; float: right;"> </div> </div>
Rein mathematisch müsste das Ganze ja auch aufgehen: 70% (links) + 30% (rechts) = 100% (insgesamt).
Der Browser (Chrome, Firefox, IE, Opera usw.) sieht das allerdings anders. Bei den obenstehenden Prozenteinteilungen nehmen die Container zusammen zu viel Platz ein, sodass sie nicht mehr nebeneinander angezeigt werden können, sondern halt vertikal versetzt. Margin und Padding der Container sind 0.
Wenn ich aber jetzt z.B. beim linken Container die Breite um 1% reduziere (also 69% statt 70%) sind die Container zwar nebeneinander, aber dafür ist eine recht große Lücke dazwischen.
Wer kann mir sagen, wie ich zwei DIV-Container so nebeneinander bekomme, dass sie sich nicht überlappen und keine Lücke dazwischen ist?
Ich habe das ganze auch noch hier als Beispiel mal hochgeladen: http://mermadalis.lima-city.de/div_float.html -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du kannst links und rechts das Attribut "position:absolute;" verpassen. Damit ist es möglich, die Container absolut zum wrapper zu possitionieren. Anschließend schreibst du in den linken: "left:0px, width:70%;" und in den rechten: "right:0px;width:30%;". Wie das dann genau ausschaut, hängt auch an deinem Layout selbst. Vielleicht gibts hier auch noch eine bessere Lösung für nicht absolut possitionierte Container, aber die fällt mir gerade nicht ein.
-
mermadalis schrieb:
Rein mathematisch müsste das Ganze ja auch aufgehen: 70% (links) + 30% (rechts) = 100% (insgesamt).
Tut es auch, allerdings wird border zur breite dazugerechnet, also passen deine 2 divs dann nicht mehr nebeneinander.
das entfernen der border-eigenschaft oder
box-sizing:border-box;
sollte dein Problem beheben. -
mermadalis schrieb:
Geht auch auf, allerdings wird der Rand dazugezählt, was dann über 100% hinausgeht.
Rein mathematisch müsste das Ganze ja auch aufgehen: 70% (links) + 30% (rechts) = 100% (insgesamt).
Versuchs mal ohne Border und mit Farbe ausgefüllt, dann siehste es.
<div id="links" style="width: 70%; height: 100px; float: left; border: 0px; margin: 0; padding: 0; background-color:red;"> </div> <div id="rechts" style="width: 30%; height: 100px; float: right; border: 0px; margin: 0; padding: 0; background-color:blue;"> </div>
Beispiel
€dit
pcw war schneller - zu spät gesehen :)
Beitrag zuletzt geändert: 10.2.2013 23:19:55 von menschle -
pcw war schneller - zu spät gesehen :)
ach diese zwei std...
wenn du zwei divs nebeneinander haben willst, musst du ja nicht zwingend beide floaten... eines reicht ja vollkommen:
<div style="float:left;width:70%;"> <p>links</p> </div> <div> <p>rechts</p> </div> <br style="clear:left;" />
-
Die Lösungsansätze greifen eventuell zu kurz, denn es ist nicht nur der Rand, der im sogenannten Box-Modell hinzugerechnet werden muß!
width definiert nur die nutzbare Breite des Contentbereiches eines Containers.
Darin platzierte Container brauchen aber zusätzlichen Platz für margin, border und padding.
Anschauliches Bild: *cklick*
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
