Try this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Design</title>
<style type="text/css">
body{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#content_main{
width: 100%;
margin: 0px;
background: url(http://fah.mine.nu/clouded/templates/clouds.jpg) repeat;
border: solid 1px #AAA;
float:left;
}
#container_a{
width:50%;
float: left;
text-align: center;
overflow: auto;
}
#container_b{
width:30%;
float: left;
text-align: center;
overflow: auto;
}
#container_c{
width: 19.9%;
float: left;
text-align: center;
overflow: auto;
}
#sub_content{
width: 90%;
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
border-bottom: solid 1px #AAA;
background-color: #FFF;
text-align: left;
overflow: auto;
border: solid 1px #AAA;
}
#logo {
text-indent: -99999px;
width: 150px;
height: 29px;
background: url(http://fah.mine.nu/clouded/templates/logo.png);
}
#nav_main {
background: url(http://fah.mine.nu/clouded/templates/menugrad.png);
padding: 3px;
}
#header {
background: url(http://fah.mine.nu/clouded/templates/menugrad.png);
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0px;
height: 25px;
color: #FFF;
text-align: center;
border-bottom: solid 1px #AAA;
}
a:link {text-decoration: none; color:#FFFFFF; margin-left: 10px;}
a:visited {text-decoration: none; color:#FFFFFF; margin-left: 10px;}
a:active {text-decoration: none; color:#FFFFFF; margin-left: 10px;}
a:hover {text-decoration: underline; color:#FFFFFF; margin-left: 10px;}
p {
margin: 5px;
}
</style>
</head>
<body>
<div id="logo">CloudedMind.us</div>
<div id="main">
<div id="nav_main"><a href="">Menu Item</a><a href="">Menu Item</a></div>
<div id="content_main">
<div id="container_a">
<div id="sub_content"><div id="header">Header</div><p>ContentContentContentContentContentContent<br />ContentContentContentContentContentContent</p></div>
<div id="sub_content"><div id="header">Header</div><p>ContentContentContentContentContentContent<br />ContentContentContentContentContentContent</p></div>
</div>
<div id="container_b">
<div id="sub_content"><div id="header">Header</div><p>ContentContentContentContentContent<br />ContentContentContentContentContent</div>
</div>
<div id="container_c">
<div id="sub_content"><div id="header">Header</div><p>ContentContentContent<br />ContentContentContent</p></div>
</div>
</div>
</div>
</body>
</html>
It works in IE and Firefox.
The problem with the cloud background was solved by adding "float:left" to #content_main.
To center a <div> inside another <div> is a pain.
Put this to center a div:
div {
width: 80%; (Or some other value)
margin: auto;
}
Hope that helps more.
