Fließendes Layout: zwei flexible Textspalten?

[dieselross]

Das musst du herzeigen - kann mir drunter nix vorstellen :)

Ich hoffe, das wird jetzt nicht zu viel. Und ich hoffe auch sehr, das verdeutlicht mein Problem.

CSS:

body {  
	background-image:url('../media/BodyBG.jpg');  
	padding:0;  
	margin:0;  
	font-family:Arial, Helvetica, sans-serif;  
	font-size:101%;  
}  
#Frame {  
	display:block;  
	width:80%;  
	min-width:740px;  
	min-height:400px;  
	background-color:#ffffff;  
	margin-left:auto;  
	margin-right:auto;  
}  
#Header {  
	display:block;  
	width:100%;  
	height:70px;  
	background-image:url('../media/FrameTop.jpg');  
	background-repeat:repeat-x;  
}  
#HeaderLeft {  
	display:inline-block;  
	width:40px;  
	height:70px;  
	background-image:url('../media/FrameUL.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:left;  
}  
#HeaderRight {  
	display:inline-block;  
	width:40px;  
	height:70px;  
	background-image:url('../media/FrameUR.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:right;  
}  
#Navigation {  
	display:block;  
	width:100%;  
	min-width:400px;  
	height:75px;  
	background-image:url('../media/NavBG.jpg');  
	background-repeat:repeat-x;  
}  
#NavigationLeft {  
	display:inline-block;  
	width:70px;  
	height:75px;  
	background-image:url('../media/NavL.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:left;  
}  
#NavTabs {  
	display:inline-block;  
	position:relative;  
	left:0px;  
	top:-16px;  
	width:544px;  
	background-image:url('../media/NavBG.jpg');  
	background-repeat:repeat-x;  
}  
#NavigationRight {  
	display:inline-block;  
	width:70px;  
	height:75px;  
	background-image:url('../media/NavR.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:right;  
}  
#MainBlock {  
	display:block;  
	width:100%-80px;  
	height:100%;  
	min-width:400px;  
	min-height:400px;  
}  
#MainLeft {  
	display:inline-block;  
	width:40px;  
	height:100%;  
	min-height:400px;  
	background-image:url('../media/FrameL.jpg');  
	background-repeat:repeat-y;  
	position:relative;  
	float:left;  
}  
#MainRight {  
	display:inline-block;  
	width:40px;  
	height:100%;  
	min-height:400px;  
	background-image:url('../media/FrameR.jpg');  
	background-repeat:repeat-y;  
	position:relative;  
	float:right;  
}  
#ContentArea {  
	display:inline-block;  
	position:relative;	  
	width:100%;  
	min-width:400px;  
	min-height:400px;  
	background-color: blue;  
}  
#ContentLeft {  
	display:inline-block;  
	position:relative;  
	width:49%;  
	min-height:400px;  
	background-color: red;  
}  
#ContentRight {  
	display:inline-block;  
	position:relative;  
	width:49%;  
	float:right;  
	clear:both;  
	min-height:400px;  
	background-color:yellow;  
}  
#Footer {  
	display:block;  
	width:100%;  
	height:70px;  
	background-image:url('../media/FrameBottom.jpg');  
	background-repeat:repeat-x;  
}  
#FooterLeft {  
	display:inline-block;  
	width:40px;  
	height:70px;  
	background-image:url('../media/FrameLL.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:left;  
}  
#FooterRight {  
	display:inline-block;  
	width:40px;  
	height:70px;  
	background-image:url('../media/FrameLR.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:right;  
}  
#Logo {  
	display:inline-block;  
	width:200px;  
	height:40px;  
	position:relative;  
	top:30px;  
	background-image:url('../media/Logo.jpg');  
	background-repeat:no-repeat;  
}	  
.invisible {  
	display: none;  
}  
#homeSpace {  
	display: block;  
	width: 136px;  
	height: 75px;  
	position: absolute;  
	border:0px;  
	left: 0px;  
}  
#homeCurrent {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTabCurrent.jpg');  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#home:link {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#home:visited {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#home:hover {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center center;  
}  
#home:active{  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#galerieSpace {  
	display: block;  
	width: 100px;  
	height: 40px;  
	position: absolute;  
	border:0px;  
	left: 136px;  
}  
#galerieCurrent {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTabCurrent.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#galerie:link {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#galerie:visited {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#galerie:hover {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center center;  
}  
#galerie:active{  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
   "http://www.w3.org/TR/html4/loose.dtd">  
  
<html lang="de">  
<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
	<title>untitled</title>  
	<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8">  
	<meta name="generator" content="TextMate http://macromates.com/">  
	<meta name="author" content="Holger Pleus">  
	<!-- Date: 2009-09-04 -->  
</head>  
<body>  
	<div id="Frame">  
		<div id="Header">  
			<div id="HeaderLeft">  
			</div>  
			<div id="Logo">  
			</div>  
			<div id="HeaderRight">  
			</div>  
		</div>		  
		<div id="Navigation">  
			<div id="NavigationLeft">  
			</div>  
			<ul id="NavTabs">  
				<li id="homeSpace">  
					<a id="homeCurrent">  
					<span class="invisible">Home</span></a>  
				</li>  
				<li id="galerieSpace">  
					<a id="galerie" href="#">  
					<span class="invisible">Galerie</span></a>  
				</li>  
			</ul>  
			<div id="NavigationRight">  
			</div>  
		</div>  
		<div id="MainBlock">  
			<div id="MainLeft">  
			</div>  
			<div id="SidebarLeft">  
			</div>  
			<div id="ContentArea">  
				<div id="ContentLeft">  
				</div>  
				<div id="ContentRight">  
				</div>  
			</div>  
			<div id="MainRight">  
			</div>  
		</div>  
		<div id="Footer">  
			<div id="FooterLeft">  
			</div>  
			<div id="FooterRight">  
			</div>  
		</div>  
	</body>  
</html>  

Gruß
dieselross