For the other div you will need to float the nav bar left in order to remove it from the page flow. Then float the #real_content div to the right, now you will need your main wrapper to contain all these floats.
Since you are going to pull that lower right div (#real_content) out of the wrapping div you will not be able to use overflow:hidden for float containment. You will need to use a "clearfix" adaption.
Code:
#page_content {
width: 855px;
margin-left: auto;
margin-right: auto;
padding-top: 35px;
margin-top: 25px;
background:url(images/pipe_left.gif) top left repeat-y;
padding-bottom: 10px;
}
#page_content:after { /*Float Containment*/
clear:both;
content:"";
display:block;
height:0;
font-size:0;
}
Now float the two divs and adjust the margins to your liking.
Code:
/* nav styling */
#navigation {
float:left;
width: 124px;
text-align: center;
margin-top: 19px;
}
/* real content */
#real_content {
float:right;
width:650px;
margin:120px -80px 0 0;
/*background:lime;testing only*/
}
Now clear the floats above the footer 
Code:
#footer {
clear:both;
text-align: center;
color: #828282;
font-size: 10px;
margin-top: 25px;
}
Now get that relative positioned "p" class out of your footer. It is giving you a premature horizontal scrollbar.
All the above will leave you with this working page free of positioning problems.
Code HTML4Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Layout Testing...</title>
<style type="text/css">
/* Reset padding and margins */
* {
padding: 0;
margin: 0;
}
body {
font-family: Verdana, "Trebuchet MS", sans-serif;
}
#page_content {
width: 855px;
margin-left: auto;
margin-right: auto;
padding-top: 35px;
margin-top: 25px;
background:#EEF url(images/pipe_left.gif) top left repeat-y;
padding-bottom: 10px;
}
#page_content:after { /*Float Containment*/
clear:both;
content:"";
display:block;
height:0;
font-size:0;
}
#sitebranding h1 {
display: none;
}
#tagline p {
display: none;
}
#header {
height:60px;
width:540px;
margin:-17px 0 17px 222px;
background:url(images/header.gif) top left no-repeat;
}
#page_word {
float:left;
width:63px;
height:66px;
margin:-3px 0 -3px 33px;
background: url(images/word1.gif) top left no-repeat;
}
#horiz_pipe {
width: 855px;
height: 3px;
font-size:0;/*IE6 needs this*/
background-color: #444444;
}
/* nav styling */
#navigation {
float:left;
width: 124px;
text-align: center;
margin-top: 19px;
}
#navigation ul {
list-style: none;
}
#navigation li a:link, #navigation li a:visited {
font-size: 18px;
display: block;
padding: 5px 0 5px 0;
color: #828282;
text-decoration: none;
margin-bottom: 10px;
}
#navigation li a:hover {
color: #444444;
}
/* real content */
#real_content {
float:right;
width:650px;
margin:150px -100px 0 0;
position:relative;/*IE6 needs this when shifting outside of parent*/
}
#real_content p {
font-size: 12px;
color: #6b6b6b;
text-align: left;
margin-bottom: 14px;
}
#test1 {
width: 650px;
height: 228px;
margin-bottom: 2px;
font-size: 16px;
color: #000000;
background-color: #d6d6d6;
}
#real_content #caption_style {
font-size: 10px;
text-align: right;
color: #6b6b6b;
}
#footer {
clear:both;
text-align: center;
color: #828282;
font-size: 10px;
margin-top: 25px;
}
</style>
</head>
<body>
<div id="page_content">
<div id="header">
<div id="page_word"></div>
<div id="sitebranding"><h1>Testing</h1></div>
<div id="tagline"><p>more and more testing..</p></div>
</div> <!-- end of header div -->
<div id="horiz_pipe"></div>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</div>
<div id="real_content">
<div id="test1">DIV #3</div>
<p id="caption_style">testing never ends...</p>
</div> <!-- end of real_content id -->
</div> <!-- end of page_content id -->
<div id="footer">
<p>© testing... All rights reserved.</p>
<p><a href="mailto:test123@test.com" title="email us">test123@test.com</a> | <a href="mailto:test123@test.com" title="email owner">test123@test.com</a></p>
<p>Phone: (312) 712-8650 | Fax: (312) 712-5203</p>
</div>
</body>
</html>
Originally Posted by SirFrigglesworth
Bookmarks