ComputerBase Menü
Aktuelles

CSS float, ungewollte Überlappung

derkim

derkim

Cadet 1st Year
Registriert
Sep. 2011
Beiträge
11
Hallo, ich habe ein Problem mit html und css.

Ich versuche das mal zu beschreiben. Ich habe ein DIV in welches ich zwei weitere divs nebeneinander mit float gepackt habe. Die Rechte Seite soll als Navi dienen und in der Linken Seite soll der Inhalt dargestellt werden. Das DIV in welchem sich die beiden befinden, soll als Rahmen der beiden funktionieren.

Das Problem ist, dass das DIV in dem sich die beiden anderen befinden sich nicht der größe anpasst. Der Text in den gefloateten divs ragt über das Rand DIV hinaus.

Hat da jemand ne Lösung für? Ich verzweifel daran.

Gruß
 
hast du bei den heights and widths auch margin und padding mitberechnet?
also gib den divs die richtige heights and widths dann sollte da auch nichts überlappen.
 
Zuletzt bearbeitet:
Hallo,
das Rand DIV soll eine dynamische Größe haben. Also so groß sein, wie Inhalt vorhanden ist. Sich mit den gefloateten divs anpassen.

Hier mal der Code in einer light Variante

HTML: 
<!DOCTYPE html><html lang="de-DE"><head><meta charset="UTF-8" /><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /><link rel="stylesheet" type="text/css" href="style.css" /><meta name="description" content="" /><meta name="keywords" content="" /><meta name="robots" content="noindex,nofollow" /><title>Titley</title></head><body>
<div class="container">
<div class="inhalt"><h1>langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text </h1></div>
<div class="navi">
<div class="btn"><a href="#">navi</a></div>
<div class="btn"><a href="#">navi</a></div>
<div class="btn"><a href="#">navi</a></div>
<div class="btn"><a href="#">navi</a></div>
<div class="btn"><a href="#">navi</a></div>
</div>
</div>
</body></html>

Und der CSS code

Code: 
body{background:#fff;color:#000;margin:0;font:14px Verdana,Helvetica}
a:link,a:active,a:visited{color:#000;text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:14px;color:#000;font-weight:normal}
.container{background:#ddd;width:900px;margin:10% auto 10px;padding:5px;min-height:400px}
.inhalt{background:#fff;float:left;width:750px}
.navi{float:right;width:150px}
.btn{width:150px}
 
Code: 
.navi{width:auto;}

wenn dann nicht geht dann versuch mal

Code: 
.navi{width:100%;}

aber da inhalt ne feste breite hat müsste 'auto' reichen.
Ergänzung ()

hast dus hinbekommen? ne rückmeldung mit ergebnis wär nett :)
 
Hallo derkim,

an diesem Problem sitze ich nun auch schon eine ganze Weile. Soweit mein Wissen reicht, kannst Du die Größe Deines container-divs nur dynamisch anpassen lassen, indem Du kurz vor Ende des container-divs ein weiteres div einfügst. Dann erkennt der Browser, wieviel Inhalt im container-div steckt und passt die Höhe entsprechend an.

Hier der Code für die HTML:
Code: 
<!DOCTYPE html><html lang="de-DE">
<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="noindex,nofollow" />
<title>Titley</title>
</head>
<body>
<div class="container">
    <div class="inhalt">
        <h1>langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer text langer</h1>
    </div>
    <div class="navi">
        <div class="btn"><a href="#">navi</a></div>
        <div class="btn"><a href="#">navi</a></div>
        <div class="btn"><a href="#">navi</a></div>
        <div class="btn"><a href="#">navi</a></div>
        <div class="btn"><a href="#">navi</a></div>
    </div>
    <div class="helper"></div>
</div>
</body>
</html>

und hier der Code für die CSS:
Code: 
body{background:#fff;color:#000;margin:0;font:14px Verdana,Helvetica}
a:link,a:active,a:visited{color:#000;text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:14px;color:#000;font-weight:normal}
.container{background:#ddd;width:900px;margin:10% auto 10px;padding:5px;}
.inhalt{background:#fff;float:left;width:750px;}
.navi{float:right;width:150px}
.btn{width:150px}
.helper{width:900px;clear:both;}

Ich hoffe, das ist zufriedenstellend für Dich...

Beste Grüße!



FarOne
 
hab nochmal deinen ersten post richtig gelesen.
der TEXT ragt aus dem div raus?
welchen browser nutzt du?
ich denk da stimmt was grundsätzlich bei dir nicht.

btw:
das clearn nach einem float ist jedenfalls schon mal sehr gut, aber löst sein problem mit der dynamischen höhe des navi-divs nicht wirklich, weil der nur so groß ist wie sein inhalt und da sich die höhe des inhalt-divs nach der textlänge richtet und die höhe des containers darum ebenfalls müsste sich die navi-höhe automatisch anpassen. die breite vom inhalt-div ist ja eh fix.
 
Zuletzt bearbeitet:
Zuletzt bearbeitet:
@chris2603

und wie soll das bei dem problem weiterhelfen?
oder überseh ich da was?

ich werf diese seite mal rein: www.google.de
helf ich jetzt damit auch?
Ergänzung ()

chris2603 schrieb:
Punkt 8 sollte interessant sein.
Zum Vergrößern anklicken....

inwiefern.
die breite ist doch da fix angegeben und von dynamische größe der div ist da gar nicht die rede.
werd mal genauer wenn du da ne lösung siehst.

das ist doch eher ne lösung oder?:
http://webstylez.net/Floatende-Divs-gleich-hoch-machen

getestet, es klappt. hier beweis:
divgien3.jpg


der rand ist zwar direkt bündig unten aber das kriegt man bestimmt auch noch hin.
navi div würd ich aber irgendwie so machen:
HTML: 
<div class="navi">
            <ul id="navilist">
                <li class="btn"><a href="#">navi</a></li>
                <li class="btn"><a href="#">navi</a></li>
                <li class="btn"><a href="#">navi</a></li>
                <li class="btn"><a href="#">navi</a></li>
                <li class="btn"><a href="#">navi</a></li>
            </ul>
</div>
mit entsprechender css:
Code: 
#list{
	text-decoration:none;
	list-style:none;
}
oder wie man es halt haben möchte...
 
Zuletzt bearbeitet:
Naja, floatende divs nach der Methode aus Deinem Link gleich hoch zu machen, halte ich aber für einen eher uneleganten Workaround für das Problem.

Klar, meine Methode ist auch nur ein Workaround, aber etwas unkomplizierter und ich habe ihn getestet und er funktioniert - sonst hätte ich es nicht gepostet. Außerdem werden bei meinem Workaround die gewünschten Innenabstände des container-divs eingehalten.

Allerdings verstehe ich nicht, warum man sich so verbiegen muss, um so einen trivialen Effekt zu erzielen. Warum passt sich die Höhe des container-divs nicht einfach automatisch an?

Was sagt eigentlich der TE dazu? Hast Du Dein Problem selbst gelöst bekommen? Haben unsere Tipps geholfen? Gib doch mal bitte Feedback!

Beste Grüße



FarOne
 
@FarOne

moment mal. dein zusatz ist sehr sinnvoll und muss so gemacht werden nach einem float. quasi schon als standard programmierung anerkannt, aber löst doch nicht das problem dass sich die navi-div höhe nicht anpasst..muss es nochmal testen...

das kommt bei mir raus bei deiner lösung:
float5mecb.jpg


das clear beendet nämlich einfach nur den float und deine helfer-div spreizt den container auf die richtige höhe doch nicht die darin enthaltene navi-div, diese passt sich nur ihrem inhalt an.

hier meine version deiner lösung:
HTML: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unbenanntes Dokument</title>

<style type="text/css">
body{
	background:#fff;
	color:#000;
	margin:0;
	font:14px Verdana,Helvetica
}
h1{
	font-size:14px;
	color:#000;
	font-weight:normal
}
.container{
	background:#ddd;
	width:900px;
	margin:10% auto 10px;
	padding:5px;
	border: 1px solid red;
}
.inhalt{
	background:blue;
	float:left;
	width:750px;
	border: 1px solid red;
}
.navi{
	float:right;
	width:140px;
	background:grey;
	border:1px solid red;
	text-align:left;
}
#list{
	text-decoration:none;
	list-style:none;
	padding:0px;
	margin:0px;
}
#bla{
	clear:both;
}
</style>

</head>

<body>
    <div class="container">
        <div class="inhalt">
            <h1>langer text</h1>
            <p>langer text langer text langer textlanger text langer text langer textlanger text langer text langer textlanger text langer text langer textlanger text langer text langer textvvvvlanger text langer text langer textlanger text langer text langer textlanger text langer text langer textlanger text langer text langer textlanger text langer text langer textlanger text langer text langer textlanger text langer text langer textlanger text langer text langer textlanger text langer text langer textlanger text langer text langer textvvvlanger text langer text langer textlanger text langer text langer textlanger text langer text langer textlanger text langer text langer text</p>
        </div>
        <div class="navi">
            <ul id="list">
                <li class="btn"><a href="#">navi</a></li>
                <li class="btn"><a href="#">navi</a></li>
                <li class="btn"><a href="#">navi</a></li>
                <li class="btn"><a href="#">navi</a></li>
                <li class="btn"><a href="#">navi</a></li>
            </ul>
        </div>
        <div id="bla">
        </div>
    </div>
</body>
</html>

edit:
der lösungsansatz aus meinem link finde übrigens auch grad nicht elegant, aber in der not frisst der teufel und so.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Paulchen_B
PC Abstürze/ungewollte Neustarts - Fehlerquelle?
Antworten
2
Aufrufe
711
Paulchen_B
Paulchen_B
G
Ungewollte Neustarts
2
Antworten
20
Aufrufe
2.348
Grundsolide
G
A
Nach Start des PC´s ungewollte Neustarts.
Antworten
9
Aufrufe
1.030
Antimon
Antimon
Scheinweltname
[HowTo]Firewall im Whitelist-Modus --> Ungewollten Traffic automatisch blockieren
8 9 10
Antworten
194
Aufrufe
94.941
malbe007
M
B
HTML Problem mit Float / Backround-Color / DIV
Antworten
3
Aufrufe
1.096
Belee
B
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 160 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz