3 Spalten Layout - Div Höhe aneinander angleichen

Simsi · #1 (**permalink**) 01.01.2006, 13:37

Bin leider Anfänger mit XHTML und CSS und habe ein Problem. Ich will meine bereits bestehende Internetplattform http://www.pferdeverkauf.com in XHTML mit CSS umprogrammieren.

Da ich im einen oder anderen Div mehr oder weniger Text habe, benötige ich die Funktion, dass die 3 verschiedenen Div's im Container immer die selbe Höhe haben und dadurch parallel unten abschließen. Im IE funzt es im Firefox nicht. Desweiteren steht der Text nicht im Div warum?

Testseite ist einzusehen unter: http://hunter-horses.com/test-9.html

Bin um jeden Tip dankbar!

Code:

* {
 margin: 0;
 padding: 0;
 border: 0;
}

html,body {
 text-align:center;
 background-color: #373733;
 height: 100%;
}


#header{
 margin: 20px auto 0 auto;
 width: 795px;
 height: 80px;
 background-image: url(2004-hint-o-lr.gif);
 background-repeat: repeat-x;
 background-color: #FAAE53;
 border-left: 1px solid Black;
 border-right: 1px solid Black;
}
 
#container{
 width:795px;
 height: 100%;
 margin: 0 auto 0 auto;
 background-color: #FAAE53;
 border-left: 1px solid Black;
 border-right: 1px solid Black; 
 border-bottom: 1px solid #FAAE53; 
 padding-left: 5px 0 0 0;
}

* html div#container {
 min-height:100%;
 }


#navigation{
 width:145px;
 float: left;
 background-color: #FCD09A;
 border: 1px solid Black;
 display: run-in;
 overflow: inherit;

  }

* html div#navigation {
 min-height:100%;

 }

#content{
 width:500px;
 float:left;
 background-color: #FDE1C0;
 height:100%;
 border-top: 1px solid Black;
 border-right: 1px solid Black;
 border-bottom: 1px solid Black;
 }

* html div#content {
 min-height:100%;
 }

#holder {
 width:5px;
 height: 100%;
 float:left;
 }
 
#sub-content{
 width:130px;
 float:left;
 background-color: #FCD09A;
 border-left: 1px solid Black;
 border-right: 1px solid Black;
 border-top: 1px solid Black;
 border-bottom: 1px solid Black;
 height: 100%;
}

* html div#sub-content {
 min-height:100%;
 }

#footer {
 margin: 0 auto;
 background-color: #FAAE53;
 border-left: 1px solid Black;
 border-right: 1px solid Black;
 border-bottom: 1px solid Black;
 width: 795px;
 position: static; 
 bottom: 0;
 clear: both;
 margin-top: -1px;
}

Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <title>xxxxxxxxx</title>
    <link rev="made" href="xxxxxxxxx" />
    <link rev="start" href="test-9.html" title="Home Page" />
    <meta name="keywords" content="xxxxxxxxx" />
    <meta name="description" content="xxxxxxxxx" />
    <link href="test-9.css" rel="stylesheet" type="text/css" />
  </head>

<body> 

<div id="header">[img]pferdeverkauf.gif[/img]</div> 

<div id="container">

<div id="holder"></div>

<div id="navigation">Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -</div> 

<div id="content">dein content</div> 

<div id="holder"></div>

<div id="sub-content">
	

Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -Test -</p>
</div>

<div id="holder"></div>

</div>

<div id="footer">footer</div>

</body>
</html>

[/url]

Tigereye · #2 (**permalink**) 01.01.2006, 14:10

Hi,
du hast offensichtlich heigjht und min-height verwechselt.
Der IE interpretiert min-height so wie die anderen Browser height. Deswegen bringt es nicht, für IE (per Starhack) min-height anzugeben.
So sollte es funktionieren:

Code:

...
#container{
 width:795px;
 min-height: 100%;
 margin: 0 auto 0 auto;
 background-color: #FAAE53;
 border-left: 1px solid Black;
 border-right: 1px solid Black;
 border-bottom: 1px solid #FAAE53;
 padding-left: 5px 0 0 0;
}

* html div#container {
 height:100%;
 }


#navigation{
 width:145px;
 float: left;
 background-color: #FCD09A;
 border: 1px solid Black;
 display: run-in;
 overflow: inherit;

  }

* html div#navigation {
 height:100%;

 }

#content{
 width:500px;
 float:left;
 background-color: #FDE1C0;
 min-height:100%;
 border-top: 1px solid Black;
 border-right: 1px solid Black;
 border-bottom: 1px solid Black;
 }

* html div#content {
 height:100%;
 }

#holder {
 width:5px;
 height: 100%;
 float:left;
 }
 
#sub-content{
 width:130px;
 float:left;
 background-color: #FCD09A;
 border-left: 1px solid Black;
 border-right: 1px solid Black;
 border-top: 1px solid Black;
 border-bottom: 1px solid Black;
 min-height: 100%;
}

* html div#sub-content {
 height:100%;
 } 
...

Simsi · #3 (**permalink**) 01.01.2006, 16:06

Herzlichen Dank "Tigereye" für die schnelle Hilfe, nun hab ich den Text im Div. Jetzt bräuchte ich wenn möglich noch den Tipp mit welchem Befehl ich die Div's im Container so aneinander ausgerichtet kann, dass sie immer die gleiche Höhe haben, egal in welchem Div mehr oder weniger Text steht. Siehe: http://hunter-horses.com/test-9.html

Tigereye · #4 (**permalink**) 01.01.2006, 19:04

Zitat:

Zitat von Simsi

Herzlichen Dank "Tigereye" für die schnelle Hilfe, nun hab ich den Text im Div. Jetzt bräuchte ich wenn möglich noch den Tipp mit welchem Befehl ich die Div's im Container so aneinander ausgerichtet kann, dass sie immer die gleiche Höhe haben, egal in welchem Div mehr oder weniger Text steht. Siehe: http://hunter-horses.com/test-9.html

Also erst einmal solltest du in #container noch ein clearendes Element einbauen, da würde es sich anbieten, den Footer in #container einzubauen. Dadurch sollte sich schon mal der Container von der Höhe an das höchste Element, das in ihm enthalten ist, anpassen.

Für die Sache, dass drei Divs immer gleich hoch sind, such bitte mal nach "faux columns"

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Layout: 2 Spalten gleich langer Höhe	Boof	CSS	1	05.03.2010 11:50
Div auf maximale höhe	EvilMoe	CSS	2	13.03.2009 14:48
Höhe in einem dreispaltigen Layout	sliver2203	CSS	4	24.02.2009 11:55
Div Layout (überlagerte Divs mit auto. höhe)	Rijndael	CSS	0	29.11.2008 15:52
mitwachsende div bei 2 spalten layout	musmus	CSS	4	05.03.2007 01:18