Hi there inwhiterooms,
and a warm welcome to these forums. ;)
Here are our friend TheTeenScripter's suggestions put into an example...
<!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">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>basic layout</title>
<style type="text/css">
#container {
width:800px;
height:542px;
padding-top:87px;
margin:auto;
background-image:url(http://encmusic.byethost17.com/design.jpg);
background-repeat:no-repeat;
}
#nav {
width:380px;
height:32px;
margin:0 0 131px 362px;
padding:0;
list-style-type:none;
}
#nav li {
width:89px;
padding-right:6px;
float:left;
}
#nav a {
height:32px;
display:block;
}
#nav a span {
display:none;
}
#left {
width:209px;
height:236px;
margin:23px 0 0 83px;
float:left;
}
#left_top {
height:109px;
margin-bottom:18px;
}
#left_bot {
height:109px;
}
#left_top ul a,#left_bot ul a {
color:#000;
}
#right {
width:360px;
height:242px;
padding:14px;
margin:0 0 0 36px;
float:left;
overflow:auto
}
#right p {
margin:0;
padding-bottom:10px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:0.8em;
color:#000;
text-align:justify;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#left,#right {
display:inline;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<ul id="nav">
<li><a href="#"><span>home</span></a></li>
<li><a href="#"><span>about</span></a></li>
<li><a href="#"><span>services</span></a></li>
<li><a href="#"><span>contact</span></a></li>
</ul>
<div id="left">
<div id="left_top">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</div>
<div id="left_bot">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</div>
</div>
<div id="right">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p
</div>
</div>
</body>
</html>
coothead