Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>Problem mit DIV

Problem mit DIV

dom_beta08.06.1215:58
Hallo,

ich habe ein Problem mit drei DIVs und der Eigenschaft float.

Wenn ich wie unten dargestellt, den DIV namens "Content" mit Rahmen oben und unten definiere und innerhalb dieses Divs zwei andere Divs mit float:left einsetze, sitzt der untere Rahmen des Content-DIVs in den zwei anderen Divs und nicht ganz unten.

Angaben wie Höhe und Breite ändern daran nichts. Außer vielleicht ein Blockelement zum Schluß oder wenn man die beiden gefloateten DIVS in ein anderes DIV einsperrt.

Irgendeine Idee?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="de">
</head>

<body>

<div id="content" style="width:1000px; min-height:100px; margin:0 auto; border-top:1px solid black; border-bottom:1px solid black;">

<div id="links" style="width:500px; float:left;">Links (und viel Inhalt)</div>

<div id="rechts" style="width:500px; float:left;">Rechts (und viel Inhalt)</div>

</div>
</body>
</html>
„...“
0

Kommentare

kcnb8
kcnb808.06.1216:47
Wenn ich dein Problem richtig verstanden habe, dann probiere es mal hier mit:

<div id="content" style="width:1000px; min-height:100px; margin:0 auto; border-top:1px solid black; border-bottom:1px solid black;overflow:auto;">
„"Life on Earth may be quite expensive, but it includes a free annual trip around the sun." - Ashleigh Brilliant“
0
dom_beta08.06.1216:57
Es müßte so aussehen:
„...“
0
dom_beta08.06.1216:59
und so sieht es tatsächlich aus wie im Eingangsbeitrag erwähnt:
„...“
0
dom_beta08.06.1217:31
Noch mal von vorne.

Hier der HTML-Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="de">
<meta name="Description" content="">
</head>
<body>

<div id="gesamt" style="width:1000px; margin:3em auto; border:1px solid black; min-height:100px;">
<p>Gesamt</p>

<div style="float:left; height:200px; width:498px; border:1px solid red;">Left </div>
<div style="float:left;height:200px; width:498px; border:1px solid red;">Left </div>


</div>

<p>Ende??</p>
</body>
</html>


Und so sieht es im Browser (hier: Safari) aus. Ich möchte das aber so hinkriegen, daß die beiden roten DIV-Container innerhalb des Gesamt-DIVS sind - also den Gesamt-DIV "vergrößern". Geht so was?
„...“
0
dom_beta08.06.1217:36
kcnb8
<div id="content" style="width:1000px; min-height:100px; margin:0 auto; border-top:1px solid black; border-bottom:1px solid black;overflow:auto;">

Hallo!

Ich habe gerade mal gegoogelt. Deine Idee ging schon die richtige Richtung, korrekt wäre overflow:hidden statt auto.
„...“
0
dom_beta08.06.1218:32
Oder aber was ich eher mittlerweile annehme, es handelt sich um ein Berechnungsfehler meinerseits.

Offensichtlich habe die Abmessungen inklusive Rahmen nicht richtig berechnet. Die Funktion "Element überprüfen" von Google Chrome hat mich darauf aufmerksam gemacht.

Das erklärt sehr wahrscheinlich das Auftreten der Fehler. Mal alles genau durchrechnen.
„...“
0
sierkb08.06.1220:12
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="de">
<style type="text/css">
  #content {
  width: 1000px;
  min-height: 100px;
  margin: 0 auto;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  }

  #links,
  #rechts {
  width: 500px;
  min-height: 100px;
  }

  #links {
  float: left;
  }

  #rechts {
  margin-left: 510px; /* 510px = 500px Breite der linken Box + 10px Abstand der rechten zur linken Box */
  }
</style>
</head>

<body>
<div id="content">

<div id="links">
<p>Links (und viel Inhalt)</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>

<div id="rechts">
<p>Rechts (und viel Inhalt)</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>

</div>
</body>
</html>
0
dom_beta08.06.1223:01
Und wie hattest du das gemacht bei der anderen Seite? Da hattest du drie DIVs gefloatet.

div#wl {
width:300px;
float:left;
margin-left:50px
}

div#wl ul,
div#wr ul{
margin-top:5em;
list-style:none;
}

div#wl ul li,
div#wr ul li {
margin-bottom:0.9em;
}

div#wm {
margin-top:6px;
width:300px;
float:left;
}

div#wr {
width:300px;
float:left;
margin-right:50px;
}

HTML:

<div id="content" style="siehe oben">
<div id="wl">
 <ul>
     <li><a href="#">Nr.1</a></li>
</ul>
</div>
<div id="wm">
<img src="bild.jpg" alt="Bild">
</div>
<div id="wr">
 <ul>
     <li><a href="#">Nr.1</a></li>
 </ul>
</div>
</div>

Irgendwie verstehe ich da den Zusammenhang noch nicht. Vorallem: Warum du das aktuelle (siehe Eingangsbeitrag) so gemacht hast und beim anderen (hier) so.

Wobei - da hattest du eher Glück; die Min-Height ist da nämlich bei 300px festgelegt; verringert man den Min-Height hier auf 100px, ragen die drei DIVs aus dem DIV-Content heraus.
„...“
0
bmc desgin09.06.1200:07
Dann einfach die div innerhalb auf height 100% setzen, dann passen sie sich an...

Den rest über javascript berechnen...


Du könntest es ausserdem mit table elementen machen, dass geht in diesem fall glaub ich einfacher - also table, table-row, cell usw für die divs als display definieren...

Oder noch besser wären "collums" zu definieren, allerdings werden die nicht von allen browsern unterstützt...



Cheers
„Ask your questions...“
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.

iMac M4 angekündigt
iMac M4 angekündigt
Kurz: Apple bietet iPhone 15 erstmals refurbished an +++ Dells konfuse neue Produktnamen sorgen für Spott
Kurz: Apple bietet iPhone 15 erstmals refurbish...
Apple gewährt Einblick in Audio- und Video-Testlabor für iPhones
Apple gewährt Einblick in Audio- und Video-Test...
Bald viel mehr HomeKit-kompatible Geräte? Apple akzeptiert Matter-Zertifizierung
Bald viel mehr HomeKit-kompatible Geräte? Apple...
M4 zu M5: Erste Vorbereitungen
M4 zu M5: Erste Vorbereitungen
PIN-Code erraten: Dauer
PIN-Code erraten: Dauer
iPhone 17 Pro: Leaks sollen Details zur neuen Rückseite zeigen – Apple ordnet Kameras neu an
iPhone 17 Pro: Leaks sollen Details zur neuen R...
IMAP und Abstürze: Apple bekommt die Probleme mit der Mail-App nicht in den Griff
IMAP und Abstürze: Apple bekommt die Probleme m...