✔ 3 Div Container sollen gleiche Höhe haben!!

Status
Nicht offen für weitere Antworten.
CikoNo1

CikoNo1

Erfahrenes Mitglied
Hallo Leute,

ich habe hier dieses Layout: http://www.fetzer.mgvsnet.de

ich habe drei DIV Container nebeneinander. Die sollen alle die selbe Höhe haben. Diejenigen die den FF benutzten werden jetzt sagen "funktioniert doch", aber leider funktionierts nicht im IE und ich weis nicht warum.

Hier mal meine CSS:

Code: 
/* CSS Document */
HTML, BODY {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
                height:100%;
	text-align:center;
	background-image:url(bilder/bg.gif);
	background-repeat:repeat;
}

#mainContainer {
	width:940px;
	margin:0px auto;
	text-align:left;
	background-color:#FFFFFF;
	border:1px solid #CCCCCC;
}

#banner {
	width:940px;
	height:120px;
	background-image:url(bilder/header.jpg);
	background-repeat:no-repeat;
}

#content {
	width:940px;
	border-top:1px solid #CCCCCC;
}

#header { 
	width:940px;
	height:25px;
	background-image:url(bilder/bg_naviOben.gif);
	background-repeat:repeat-y;
	border-bottom:1px solid #CCCCCC;
	font-family:Arial;
	font-size:12px;
	color:#646464;
}

#contentMain {
	width:940px;
	background-color:#FFFFFF;
}

#suche {
	width:160px;
	height:25px;
	float:left;
	border-right:1px solid #CCCCCC;
	font-family:Arial;
	font-size:9px;
	color:#CF1D0E;
}

#naviOben {
	width:600px;
	height:25px;
	float:left;
}

#zubehoerUE {
	width:160px;
	height:25px;
	float:right;
	border-left:1px solid #CCCCCC;
	font-family:Arial;
	font-size:12px;
	color:#646464;
}

#naviLinks {
	width:160px;
                height:100%;
	float:left;
	background-color:#FFFFFF;
	border-right:1px solid #CCCCCC;
                padding-top:30px;
}

#inhalt { 
	width:618px;
                height:100%;
	float:left;
                background-color:#F0F0F0;
	font-family:Arial;
	font-size:12px;
	color:#646464;
                padding-top:30px;
}

#zubehoer {
	width:160px;
                height:100%;
	float:right;
	background-color:#FFFFFF;
                border-left:1px solid #CCCCCC;
	font-family:Arial;
	font-size:12px;
	color:#646464;
                padding-top:30px;
}

#footer {
	width:940px;
	height:16px;
	padding:9px 0px 0px 0px;
	float:left;
	text-align:center;
	background-image:url(bilder/bg_footer.gif);
	background-repeat:repeat;
	border-top:1px solid #CCCCCC;
	font-family:Arial;
	font-size:10px;
	color:#646464;
}

MFG
 
Ich will aber keine Browserweiche benutzen, es muss doch eine Möglichkeit geben wie man das mit eine Befehl hinbekommt, auch im IE.
 
Bist du nicht imstande, den Fokus auf den CSS-Code zu richten, ihn in Ruhe zu studieren und ggfs. mit ihm zu experimentieren :confused:

Ich kann dir noch Three Columns von Stu Nicholls empfehlen, leider auch in englisch, aber dafür mit weniger CSS-Code :)
 
Hi,

ich habe generell folgende Erfahrung gemacht: Es hilft, wenn man die div-Container, die nebeneinander liegen sollen, alle zusammen in einen Hilfscontainer packt. Der Rest hängt davon ab, wie Du die Spalten machst. Machst Du sie mit float, dann müssen die linke und rechte Spalte im Quelltext vor der mittleren Spalte kommen. Machst Du es mit position, dann kannst Du browserübergreifend nur position: relative verwenden, die anderen Positionierungsarten verstehen Mozilla und IE unterschiedlich.

Bei mir hat sich am Besten die Kombination aus float-Positionierung und dem umgebenden Hilfscontainer bewährt.
 
Grundprinzip für ein 3-spaltiges Layout mit gleichen DIV-Höhen:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
#mainBox
{
position: relative;
display: block;
background: #dfdfdf;
border-left: 170px solid #607b9e;
border-right: 170px solid #90abce;
}

#innerBox
{
display: block;
margin-left: -170px;
margin-right: -170px;
padding: 5px;
}

#leftBox
{
float: left;
position: relative;
width: 170px;
left: 0px;
}

#rightBox
{
float: right;
position: relative;
width: 160px;
right: 0px;
}

#centerBox
{
margin-left: 170px;
margin-right: 170px;
position: relative;
display: block;
height: 1%;
}

.clear
{
clear:both;
}
-->
</style>

</head>
<body>

<div id="mainBox">
        <div id="innerBox">
                <div id="leftBox"><p>dummy text</p></div>

                <div id="rightBox"><p>dummy text</p><p>dummy text</p><p>dummy text</p></div>

                <div id="centerBox"><p>dummy text</p><p>dummy text</p></div>

                <div class="clear"></div>
        </div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück