zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Spalten Layout - Div Höhe aneinander angleichen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.01.2006, 13:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.01.2006
Beiträge: 2
Simsi befindet sich auf einem aufstrebenden Ast
Standard 3 Spalten Layout - Div Höhe aneinander angleichen

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]
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.01.2006, 14:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

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%;
 } 
...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.01.2006, 16:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.01.2006
Beiträge: 2
Simsi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 01.01.2006, 19:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

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"
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:50 Uhr.