zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV höhe an Eltern DIV auto anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.06.2007, 22:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2007
Beiträge: 21
tabtwo befindet sich auf einem aufstrebenden Ast
Standard DIV höhe an Eltern DIV auto anpassen

Hi Pros,

sitz am Aufbau einer Seite ohne Tabellen. Nun es klappt bestens. Nun benötige doch Eure Hilfe.
Ich möchte erreichen das der Linke und der Rechte DIV Ihre Höhe dem mittleren (mit Text) anpassen.

So sieht es jetzt aus:


So wärs optimal:


hier mein CSS:
Code:
html, body {
	/*height:100%;*/
	background-color: #F5F5F5;
	font:Geneva, Arial, Helvetica, sans-serif;
	font-size:13px;
	margin: 0;
}

/*--| MainContainer - beinhaltet die komplette Seite |------------------------*/
#main {
	margin:auto;
	font-family:Verdana;
	text-align: left;
	background-color: #FF0000;
	width: 760px;
	padding: 6px;
	font-weight:bold;
}
/*--| headerContainer - beinhaltet Logo,Mainmenü und Topmenü |------------------------*/
#header {
	float: left;
	position: relative;
	background-color: Fuchsia;
	width: 100%;
	height: 116px;
	/*border:#FFFFFF solid 1px;*/
}
/*--| LogoContainer - beinhaltet Logo und den Titel der Seite |------------------------*/
#logo {
	float: left;
	background-color: #99CC33;
	width:300px;
	height: 80px;
}
/*--| TopNavContainer - beinhaltet die Topmenüausgabe |------------------------*/
#topnav {
	float: right;
	text-align:right;
	vertical-align:top;
	background-color: Lime;
	width: 350px;
	height: 36px;
}
/*--| LogoContainer - beinhaltet Logo und den Titel der Seite |------------------------*/
#mainnav {
	float: left;
	background-color: #FFCC00;
	width: 100%;
	height: 36px;
}
/*--| LeftContainer - beinhaltet linke Spalte |------------------------*/
#content {
	position:relative;
	width: 100%;
	vertical-align:top;
	padding: 0px;
	margin:0px;
}
/*--| LeftContainer - beinhaltet linke Spalte |------------------------*/
#left {
	float: left;
	background-color: Aqua;
	width: 200px;
}
/*--| MiddleContainer - beinhaltet mittlere Spalte / Content |------------------------*/
#middle {
	float:left;
	background-color: #fff;
	font-weight: normal;
	width: 360px;
	padding: 4px;

}
/*--| RightContainer - beinhaltet linke Spalte |------------------------*/
#right {
	float: left;
	background-color: #0099FF;
	width: 192px;
}
/*--| FooterContainer - beinhaltet linke Spalte |------------------------*/
#footer {
	float: left;
	background-color: #FFFFCC;
	width: 100%;
	height: 60px;
/*	border:#FFFFFF solid 1px;*/
}
Mein html teil:
Code:
<div id="main" align="center"><!-- main-container - der hält alles und macht die Positionierung -->
	<!--Header -->
	<div id="header">
		<div id="logo">Logo</div>
		<div id="topnav">topnav</div>header
		<div id="mainnav">Mainnav</div>
	</div>
	<!--Left -->
	<div id="left">Left<br style="clear:left;"></div>
	<!--Middle -->
	<div id="middle">
		<strong>Middle</strong>
		<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wi. Lorem ipsum dolor sit amet, consectetuer adipiscin. Sed diam nonummy nibh. consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wi. Lorem ipsum dolor sit amet, consectetuer adipiscin. Sed diam nonummy nibh. consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wi. Lorem ipsum dolor sit amet, consectetuer adipiscin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wi. Lorem ipsum dolor sit amet, consectetuer adipiscin. Sed diam nonummy nibh. consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wi. Lorem ipsum dolor sit amet, consectetuer adipiscin. Sed diam nonummy nibh. consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wi. Lorem ipsum dolor sit amet, consectetuer adipiscin.
	</div>
	<!--right -->
	<div id="right">Right<br style="clear:left;"></div>
	<div id="footer">Footer</div>
	<br style="clear:left;">
</div>
Leider habe ich die Breitenangabe nur mit Pixelangaben hinbekommen. Damit könnte ich jedoch leben Prozent wäre besser.
Kernproblem ist die Autohöhe der DivContainer "left" und "right".

Vieleicht gibt es ja bei Euch den entscheidenen Tip.

Danke schon mal.
TabTwo
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.06.2007, 22:07
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard

Hallo

Also wenn ihc mich niht irre, müsste es mit der Faux Columns TEchnik machbar sein, also bei 2 Spalten auf jeden Fall.
Bei 3 Spalten, müsste es theoretisch auch gehen.

Faux Columns
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.06.2007, 22:08
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Siehe FAQ Punkt 1.
Mit Zitat antworten
  #4 (permalink)  
Alt 17.06.2007, 22:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2007
Beiträge: 21
tabtwo befindet sich auf einem aufstrebenden Ast
Standard

Danke schon mal.
Ich möchte jedoch den Einsatz von einer absoluten Positionierung möglichst umgehen. Dies scheint für den Lösungsansatz nötig zu sein.

Bin aber noch am lesen. Der link ist echt gut
Mit Zitat antworten
  #5 (permalink)  
Alt 17.06.2007, 22:14
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von tabtwo Beitrag anzeigen
Dies scheint für den Lösungsansatz nötig zu sein.
Definitiv nicht.
Mit Zitat antworten
  #6 (permalink)  
Alt 17.06.2007, 22:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2007
Beiträge: 21
tabtwo befindet sich auf einem aufstrebenden Ast
Standard

Der Link beschreibt ausführlich die Lösung mit einer ensprechend gestalteten "Fake" Grafik die ich dem Elternelement als Hintergrung anbinde. Das jedoch ist nicht mein Ziel. Ich würde gern erfahren ob es möglich ist über CSS die Höhe der DIV´s in diesem FloatModell automatisch an das Mittlere "Content" DIV anzupassen.
Vielleicht mit "richtig positionierten Clear elementen".
Mit Zitat antworten
  #7 (permalink)  
Alt 17.06.2007, 22:59
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.847
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von tabtwo Beitrag anzeigen
Der Link beschreibt ausführlich die Lösung mit einer ensprechend gestalteten "Fake" Grafik die ich dem Elternelement als Hintergrung anbinde. Das jedoch ist nicht mein Ziel. Ich würde gern erfahren ob es möglich ist über CSS die Höhe der DIV´s in diesem FloatModell automatisch an das Mittlere "Content" DIV anzupassen.
Vielleicht mit "richtig positionierten Clear elementen".
Es geht einfach nicht! Deswegen gibt es ja die Faux Collum Technik.
Mit Zitat antworten
  #8 (permalink)  
Alt 17.06.2007, 23:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2007
Beiträge: 21
tabtwo befindet sich auf einem aufstrebenden Ast
Standard

habe in Euren FAQ diesen Link gefunden das wäre zumindest teilweise die Endlösung. ich schau mir das Morgen noch mal im Detail an.

Vielleicht geht es ja doch !

Wenn ja "pflücke" ich es auseinander und poste es.

Gruß & Danke für die Hilfe
Mit Zitat antworten
  #9 (permalink)  
Alt 17.06.2007, 23:35
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von tabtwo Beitrag anzeigen
habe in Euren FAQ diesen Link gefunden
Dasselbe in grün, aber halt für Liquid Layouts.

Zitat:
Zitat von tabtwo Beitrag anzeigen
die Endlösung.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.06.2007, 09:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2007
Beiträge: 21
tabtwo befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Liquid Layouts.


Sei so nett und beschreib Liquid Layout näher. Oder nen Link.

Danke schon mal für Deine Geduld
Mit Zitat antworten
Sponsored Links
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
DIV automatische Höhe in-flames CSS 13 20.05.2011 19:49
Header entfernen tripple CSS 17 15.06.2010 15:41
Div Wight Auto???? temp11 CSS 8 30.06.2009 12:34
Problem mit CSS in Joomla 1.5 noobilicius CSS 6 25.09.2008 20:24
höhe eines div tag an ein anderes anpassen ffr CSS 4 09.12.2003 16:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:49 Uhr.