Ich möchte folgendes erreichen in Es sol ein zweispaltiges Layout erstellt werden, hierbei soll links und rechts ein grafischer Rand mit angezeigt werden. Der Inhalt von leftconent und der Inhalt von rightcontent sollen unabhängig von ihrem Inhalt gleiche Höhe haben.
So sieht es im Augenblick bei mir aus
Code
body {
background: #FFFFFF;
height: 100%;
margin: 0px;
line-height: 120%;
}
#content {
position: absolute;
left: 50%;
width: 776px;
margin-left: -388px;
background: url(left_border.gif) left repeat-y;
}
.borderright {
width: 765px;
margin-left: 9px;
background: url(right_border.gif) right repeat-y;
background-color: #FF0000;
}
#innercontent {
width: 756px;
margin-right: 9px;
background-color: #00FF00;
}
#rightcontent {
width: 555px;
background-color: #0000FF;
float: right;
}
#leftcontent {
background-color: #F0F0F0;
margin-right: 555px;
}
#logoimage {
width: 555px;
height: 218px;
}
Alles anzeigen
Code
<div id="content"><div class="borderright"><div id="innercontent"><div id="rightcontent">
[img]logo.jpg[/img]
</div>
<div id="leftcontent">
Hier steht der linke Text
</div></div>
</div></div>
</body>
Im IE wird es korrekt dargestellt. Nur im Firefox wird
1. der rechte Rand nur ein Teil dargestellt
2. die Höhe von rightcontent und leftcontent wird nur über die Höhe einer Zeile und nicht über die Höhe des Images dargestellt.
Was muss ich machen, damit obiges in beiden Browsern (IE und Firefox) gleich dargestellt wird?
Danke für eure Hilfe