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>&nbsp;</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>&nbsp;</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>

anyone have any suggestions?

> 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.

Add this to your stylesheet -

#mainnoright { overflow:hidden; --
<!--[if IE]>
#mainnoright { zoom:100%; --
<[endif]-->

It may still not display correctly in CS3, although it will in preview, and
it will in CS4.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"cdoyle" <webforumsuser@macromedia.com> wrote in message
news:g946gi$8ak$1@forums.macromedia.com...
> 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>&nbsp;</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>&nbsp;</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>
>

I was just about to post back, that I thought I got it to work with this
#greybox {
background-color: #666666;
width: 619px;
padding-top: 5px;
--
#quicklinks {
width: 100px;
float: right;
--
#MainContentText {
width: 300px;
float: left;
padding-right: 5px;
padding-left: 5px;
--

It displays fine in DW now, and in IE7 (it's an internal site and we only have
IE 6 and 7 here)

So should I leave it like I have it now, or would it be better to go back to
what I had, and apply the code you listed.

Try both - test in the various browsers with different viewport widths. See
which is more robust.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"cdoyle" <webforumsuser@macromedia.com> wrote in message
news:g96ij5$5k2$1@forums.macromedia.com...
>I was just about to post back, that I thought I got it to work with this
> #greybox {
> background-color: #666666;
> width: 619px;
> padding-top: 5px;
> --
> #quicklinks {
> width: 100px;
> float: right;
> --
> #MainContentText {
> width: 300px;
> float: left;
> padding-right: 5px;
> padding-left: 5px;
> --
>
> It displays fine in DW now, and in IE7 (it's an internal site and we only
> have
> IE 6 and 7 here)
>
> So should I leave it like I have it now, or would it be better to go back
> to
> what I had, and apply the code you listed.
>
>
>