|
|||
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> |
Sponsored Links |
|
|||
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%; } ... |
Sponsored Links |
|
|||
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
|
|
|||
Zitat:
Für die Sache, dass drei Divs immer gleich hoch sind, such bitte mal nach "faux columns" |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |