Tweet
Hallo zusammen,
ich hab ein Problem mit <Div> Elementen.
Im Prinzip hab ich auf meiner Seite einen Header und darunter einen Contentbereich.
In diesem Contentbereich sollen 3 Spalten sein:
-Spalte1 eine Grafik
-Spalte2 eine Menü
-Spalte3 der Content
Die ganze Seite soll eine bestimmte Breite nicht überschreiten und vertikal im Browser zentriert sein. Im Hintergrund der Seite soll eine Hintergrundgrafik sein.
Der Contentbereich soll immer so lang sein wie Spalte 3.
Im Internet Explorer 6 stimmt die Darstellung auch nur im Firefox absolut nicht. Im Anhang ein kleines Beispiel und die Style Datei
Kann mir bitte jemand helfen dass es auch im Firefox stimmt ?
Danke
ich hab ein Problem mit <Div> Elementen.
Im Prinzip hab ich auf meiner Seite einen Header und darunter einen Contentbereich.
In diesem Contentbereich sollen 3 Spalten sein:
-Spalte1 eine Grafik
-Spalte2 eine Menü
-Spalte3 der Content
Die ganze Seite soll eine bestimmte Breite nicht überschreiten und vertikal im Browser zentriert sein. Im Hintergrund der Seite soll eine Hintergrundgrafik sein.
Der Contentbereich soll immer so lang sein wie Spalte 3.
Im Internet Explorer 6 stimmt die Darstellung auch nur im Firefox absolut nicht. Im Anhang ein kleines Beispiel und die Style Datei
CSS:
#backgroundmain{
position: relative;
padding: 0px;
height: 100% !important;
width:100%;
margin: auto;
text-align: center;
background-color: white;
}
#header {
position: relative;
padding: 0px;
height: 179px; width: 950px;
margin: auto;
text-align: left;
margin-top: 5px;
background-color:#c0c0c0;
}
#main {
position: relative;
padding: 0px;
height: auto !important;
width: 950px;
margin: auto;
text-align: left;
background-color: red;
border-bottom: 10px solid #FFCC66;
}
#col1 {
float: left;
padding: 0px;
width: 60px;
height: auto;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
background-color: yellow;
}
#col3 {
float: left;
width: 670px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
height: auto;
padding-left: 10px;
padding-right: 10px;
background-color: green;
}
#col2 {
float: left;
width: 220px;
height: auto;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
background-color: blue;
}
HTML:
<body>
<div id="backgroundmain">
<div id="header">header</div>
<div id="main">main<br>
<div id="col1">col1<br><br><br><br><br></div>
<div id="col2">col2<br><br><br><br><br><br><br><br><br><br></div>
<div id="col3">col3<br><br><br><br><br><br><br></div>
</div>
</div>
</body>
#backgroundmain{
position: relative;
padding: 0px;
height: 100% !important;
width:100%;
margin: auto;
text-align: center;
background-color: white;
}
#header {
position: relative;
padding: 0px;
height: 179px; width: 950px;
margin: auto;
text-align: left;
margin-top: 5px;
background-color:#c0c0c0;
}
#main {
position: relative;
padding: 0px;
height: auto !important;
width: 950px;
margin: auto;
text-align: left;
background-color: red;
border-bottom: 10px solid #FFCC66;
}
#col1 {
float: left;
padding: 0px;
width: 60px;
height: auto;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
background-color: yellow;
}
#col3 {
float: left;
width: 670px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
height: auto;
padding-left: 10px;
padding-right: 10px;
background-color: green;
}
#col2 {
float: left;
width: 220px;
height: auto;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
background-color: blue;
}
HTML:
<body>
<div id="backgroundmain">
<div id="header">header</div>
<div id="main">main<br>
<div id="col1">col1<br><br><br><br><br></div>
<div id="col2">col2<br><br><br><br><br><br><br><br><br><br></div>
<div id="col3">col3<br><br><br><br><br><br><br></div>
</div>
</div>
</body>
Danke
Kommentar