OK,
this has been bugging me today, and haven't been able to figure out what I
need to do.
I've attached my HTML and CSS related to the problem.
I have basically a 2 column page with header and footer. The left column is
the menu, and the right column is where everything goes.
In the right column (#mainnoright) , I wanted to nest some other divs.
What I want is inside this div is a grey box (#greybox), that will go across
the top.
Then under greybox, 2 columns (#MainContentText and #quicklinks).
No matter what I do, I can't seem to get #MainContent and #quicklinks to line
up next to each other)
If I try any types of floats on any of them, in DW the border edges for
(#mainnoright) no longer extend down past those nested divs.
What is the correct way to get the layout like I want it, and have it display
right in DW?
<div id="wrapper">
<div id="topbanner">
<h1><img src="images/headerbanner.gif" width="510" height="40" /></h1>
</div>
<div id="menu"><?php require_once('includes/mainnav.php'); ?>
</div>
<div id="faux">
<div id="LeftMenu">
<p>Let Menu Item</p>
<p> </p>
</div>
<div id="mainnoright">
<div id="greybox">
<p><img src="images/welcomebanner.png" alt="" width="600"
height="57" /></p>
</div>
<div id="MainContentText">
<h3>Text Stuff Here</h3>
<p> </p>
</div> <div id="quicklinks">This should line up next to MainContentText,
but instead drops below it.</div>
</div>
</div> <!--End Faux -->
<div id="footer"></div>
</div> <!--End Wrapper -->
<!--
body {
background-color: #dac479;
margin-top: 4px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
--
#mainnav {
width: 100%;
background-color: #60cae4;
padding-bottom: 5px;
--
#menu {
width:100%;
background-color: #016cba;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #60cae4;
--
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
position: relative;
font-family: Arial, Helvetica, sans-serif;
--
#banner {
margin:0;
padding: 20px;
--
#topbanner {
width: 100%;
--
#LeftMenu {
width: 150px;
float: left;
--
#footer {
height: 1em;
width: 100%;
clear: both;
background-color: #0066CC;
--
#faux {
margin-bottom: 5px;
overflow: auto; /* Paul O Brien Fix for IE
www.pmob.co.uk */
width: 100%;
background-image: url(images/brownbg.gif);
background-repeat: repeat-y;
float: left;
--
#mainnoright {
width: 620px;
margin-left: 170px;
padding-right: 2px;
padding-left: 2px;
--
h3 {
color: a96804;
--
#greybox {
background-color: #666666;
width: 619px;
padding-top: 5px;
--
#quicklinks {
width: 100px;
margin-left: 250px;
--
#MainContentText {
width: 200px;
--
-->
</style>