Browserproblem mit float's und height = 100%

Status
Nicht offen für weitere Antworten.
Jukkales

Jukkales

Erfahrenes Mitglied
Hallo ich bin's mal wieder,

Ich habe ein Browserproblem mit floats, ich möchte 2 Divs nebeneinander Positionieren die dabei eingesamtmaß von 100% haben und beide eine Gesammthöhe von 100% des Browserfensters.

http://testserver.records-of-lunia.de/acp/

Im Opera werden die float's korret dargestellt wie es soll, jedoch beträgt dieHöhe nur 100% des Divs. Firefox stellt die gleiche Höhe dar, jedoch die floats untereinander.
der Internet Explorer macht erst garnicht mit, er stell die floats ersteinmal untereinander dar und hat eine Höhe von mehr als 100%

(Ich hab ein wenig bei den Vorthema angeguckt jedoch berwirkte dies nicht viel)

Kann mir da jemand helfen?
 
Hi,

hab den Quellcode mal ein bischen überarbeitet:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>

<style media="all" type="text/css">
html,body
{
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 100%;
}

#wrapper {
        position:relative;
        min-height:100%;
        height:auto !important;
        height:100%;
        background: #CCCCCC;
}

.header
{
        background:#FF9900;
        border-bottom: 1px solid black;
        height: 40px;
        width: 100%;
        text-align: left;
}

.header .headercontent
{
        padding-top: 10px;
        padding-left: 25px;
        font-weight: bold;
        font-size: 16px;
}

.footer
{
        background:#FF9900;
        border-top: 1px dotted black;
        height: 25px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        clear:both;
}

.footer .footercontent
{
        padding-top: 4px;
        padding-left: 5px;
        font-style: italic;
        font-size: 12px;
}

.content
{
        width: 79%;
        float: left;
        padding-bottom: 25px;
        border-right: 1px solid black;
}

.menu
{
        margin-left:79%;
        padding-bottom: 25px;
}
</style>

</head>
<body>

<div id="wrapper">
     <div class="header">
        <div class="headercontent">
                Records of Lunia ACP - WeltenServiceCMS
        </div>
     </div>
     <div class="container">
        <div class="content">
                Test
        </div>
        <div class="menu">
             Menu
        </div>
     </div>
     <div class="footer">
        <div class="footercontent">
                &copy; 2007 by Jukka | WeltenServiceCMS Version Alpha 0.1
        </div>
     </div>
</div>

</body>
</html>
 
Den Rahmen zwischen den beiden Spalten kannst du mit Hilfe eines Hintergrundbildes innerhalb des DIVs #wrapper erzeugen, sodass er ebenfalls eine 100%-Höhe besitzt:

Code: 
#wrapper {
        position:relative;
        min-height:100%;
        height:auto !important;
        height:100%;
        background: #CCCCCC url(border.png) repeat-y 79% 0;
}

.content
{
        width: 79%;
        float: left;
        padding-bottom: 25px;
        /*border-right: 1px solid black;*/ /* entfällt */
}
 

Anhänge

Wusste garnicht das man soviele Anweisungen auf eine Eigenschaft setzen kann.

Ein weiteres Dankeschön, super Hilfe :)
 
In der allgemeinen background-Eigenschaft lassen sich Angaben zu den Eigenschaften

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
zusammenfassen.
 
Ich möchte zu dieser Frage noch einmal zurückgreifen da sich ein neues Problem aufgrund dessen ergab, ich hoffe es ist ok.

Es handelt sich wieder um die Gleiche Seite mit dem Gleichen Stylesheet.
Wenn ich im content einen Text mit überlange darstelle ergib ich im Firefox und Opera das Problem das der Text über den Footer hinausreicht. MAn sieht es ja selbst

CSS: 
.content {
        width: 79%;
		height: 100%;
        float: left;
		padding: 10px 0 25px 10px;
		overflow: auto;
}

Ich wollte mit de Overflow arbeiten aber dies wir nur im Internetexplorer korrekt angezeigt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück