zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2x float:left; innerhalb eines Divs verwenden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.05.2006, 13:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.10.2005
Beiträge: 20
Bonaparte befindet sich auf einem aufstrebenden Ast
Standard 2x float:left; innerhalb eines Divs verwenden

Ich möchte folgende Struktur anwenden. Allerdings macht FF (1.5.0.3) nicht mit (normaleweise habe bei sowas oft mit IE Probleme...)
Und zwar werden die Divs left_cont und right_cont unterhalb von inner_cont angezeigt, sie müssen aber innhalb angezeigt werden. Wo ist das Problem? Bei IE funktioniert es einwandfrei.
Wenn ich float:left; rausnehme, dann sind die Div wieder innhalb von inner_cont aber stehen nicht mehr nebeneinander.

Code:
<div id="inner_cont">
		<div id="left_cont">
			<div id="navigation">
				Text
				Text
				Text
				Text
			</div>
		</div>
		<div id="right_cont">Inhalt</div>
	</div>
Code:
#inner_cont {
	border:1px solid #FF0000;
	background-color:#FFFFFF;
	background-image:url(../img/inner_cont_bg.gif);
}

#left_cont {
	float:left;
	width:165px;
	height:600px;
	margin-right:5px;
	background-color:#cccccc;
}

#right_cont {
	float:left;
	width:560px;
	padding-bottom:15px;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.05.2006, 14:05
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Das Problem ist, dass du nicht ordentlich clearst nach dem floaten. Dass der IE das ohne clear korrekt anzeigt, ist ein Fehler.
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.05.2006, 14:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.10.2005
Beiträge: 20
Bonaparte befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Boris
Dass der IE das ohne clear korrekt anzeigt, ist ein Fehler.
Hätte ich mir denken müssen

Ok, jetzt stellt sich aber die Frage, welche von den 3 Divs gecleart werden muss.
Bei inner_cont macht das keinen Sinn, muss ich dann einen weiteren Div hinzufügen?

Nachtrag:
Ich habe
Code:
<br clear="all" />
eingefügt und es funktioniert, gibt es eine andere Möglichkeit?
Mit Zitat antworten
  #4 (permalink)  
Alt 06.05.2006, 14:56
Neuer Benutzer
neuer user
 
Registriert seit: 04.05.2006
Beiträge: 11
bitalias befindet sich auf einem aufstrebenden Ast
Standard

Wenn du das float:left; aus #right_cont entfernst hast du den gewünschten Effekt. #left_cont und #right_cont sind innerhalb von #inner_cont, doch nur #right_cont nimmt Einfluss auf die Höhe von #inner_cont. Clearen muss du dann glaube ich auch nicht mehr.
Mit Zitat antworten
  #5 (permalink)  
Alt 06.05.2006, 15:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.10.2005
Beiträge: 20
Bonaparte befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Anwort, es gibt aber einen Grund, warum ich #inner_cont verwende. Die Navigation, also #left_cont soll eine Hintergrundfarbe bekommen. Damit die zwei divs aber einheitlich aussehen, also gleich groß sind definiere ich in der #inner_cont ein Hintergrundbild.

Wenn ich #inner_cont nicht hätte, würde das Hintergrundbild auf der gesamten Seite dargestellt.
Mit Zitat antworten
  #6 (permalink)  
Alt 06.05.2006, 15:20
Neuer Benutzer
neuer user
 
Registriert seit: 04.05.2006
Beiträge: 11
bitalias befindet sich auf einem aufstrebenden Ast
Standard

Also ich meinte ja nicht das du auf #inner_cont verzichten sollst. Um die beiden #left_cont und #right_cont gleich Hoch zu kriegen, könntest du jauch bei #right_cont ein min-height: [Hoehe von #left_cont]; einsetzen. Dabei daran denken das der IE das nicht versteht, also * html Hack einsetzen.
Mit Zitat antworten
  #7 (permalink)  
Alt 06.05.2006, 15:46
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Das mit den zwei floats ist schon in Ordnung so.

Es gibt verschiedene Methoden, #inner_cont zu clearen. Eine andere, einfache Methode wäre es, #inner_cont eine feste Breite zuzuweisen und ebenfalls ein float: left; einzutragen.

Es gibt auch die :after clear Methode (siehe Google), die ich gerne benutze:

Code:
#inner_cont:after
	{
		content: ".";
		visibility: hidden;
		height:		0;
		display:	block;
		clear:		both;
	}
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #8 (permalink)  
Alt 06.05.2006, 19:03
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.03.2005
Beiträge: 286
Chattanooga befindet sich auf einem aufstrebenden Ast
Standard

füg dem inner-cont lediglich 'overflow:auto' hinzu und FF 1.50x und Opera 9x, spannen auch ohne gesonderte clear-Anweisungen den Bereich vollständig auf.

Gruß
Chattanooga
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Script nur für Inhalt eines bestimmten DIVs Kipperdesign Javascript & Ajax 8 11.02.2013 14:03
Bei float:left fliegen Divs raus, trotz mind. Höhe/Breite o.the.run CSS 2 23.12.2012 11:38
Ratschläge bei Publizierung eines fertigen Layouts gesucht Black Fladder CSS 55 05.09.2004 15:30
Positinierung eines DIVs innerhalb eines Eltern-DIVs? Robin CSS 0 17.08.2004 17:01
bilder-abstand innerhalb eines divs????? xy2er CSS 4 22.05.2004 01:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:29 Uhr.