Is this something like what you were after? (I haven't fully cleaned up your code there's still a lot of scary, un-needed stuff in there!). I wasn't exactly sure what you wanted...:
CSS
- Code: Select all
<!--
body {
margin: 0px;
padding: 0px;
background-color: #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
text-align: left;
height: 900px;
}
#logo {
width:200px;
height:127px;
float:left;
background-color: #6666FF;}
#leftcol {
width:200px;
background-color: #6006FF;
float: left;
}
#navbar {
height:35px;
text-align: right;
background-color: #010080;
line-height: 35px;
overflow: hidden;
}
#picture {
height:92px;
background:pink url(Images/testpichead1.jpg) no-repeat;
}
#bodywrap {
background-color: #999999;
overflow: hidden;
}
#sidecol {
width:200px;
background-color: #00FFFF;
margin-bottom: 20px;
padding: 5px;
float: left;
overflow: hidden;
}
#maincol {
background-color: #99FF66;
margin-bottom: 30px;
padding: 5px 5px 5px 5px;
border: 0px solid #000000;
}
#footer {
height:30px;
padding: 10px 0px;
text-align: center;
color: #000000;
background-color: #FFFF99;
line-height: 25px;
}
html:
- Code: Select all
<body onload="foldInit()">
<div class="style1" id="logo">
<p>Logo</p>
</div>
<div id="picture">Picture
</div>
<div id="navbar">
<p class="style2">Home | Photo gallery| Contact us </p>
</div>
<div id="leftcol">
<p>Left column</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="bodywrap">
<div id="sidecol" >
<h3>sidebar</h3>
<ul>
<li>List</li>
<li>List</li>
<li>List</li>
</ul>
</div>
<div id="maincol">
<h2>main content</h2>
<p>Blah blah blah blah. </p>
</div>
<div id="footer">
<p class="style3">Footer</p>
</div>
</div>
</body>
Hope it's something close!
All the best,
Snow