Background div do not support floating divs

I've created quite simple construction, but it doesn't work in way I want to.
I have wrapper which do not wrap up the floating divs placed in it as it should -
it shrinks to base size (top and bottom corners) and stays like that while floating substances maintain previously defined positions - only without background...
Any suggestions how to fix this?
The construction looks round about like this:
<body>
<div> div tag with height: 5px; contains top corners for layout </div>
<div class= "opened div tag with backround attributes (color and borders)">
         <div>here comes the floating content (list with style set to: none;)
               I set it inside the div with background attributes to have floating content wrapped into background color and borders
        </div>
</div (here i close "background wrapper")>
<div> div tag with heightL 5px; contains bottom corners for layout </div>
</body>
Thanks.

This is a bit of a shot in the dark but try overflow: hidden; in the CSS rule for your wrapper?
It would be much easier to see the page.
Martin

Similar Messages

Main div is not containing interior divs

My interior divs are floating beyond the height of my main div, instead of my main div lengthening to accommodate interior divs. I've examined coding from another site I did and it looks to me to be the same code. I need a second pair of eyes.
http://12caliboguecay.com
Thank you!
Samantha

chameleonhhi wrote:
I gave it a try...and "yes" it did extend the height, however only when I look at it in preview mode, which makes it a bit awkward to work with in design mode. Is it not okay practice to do the br class=clearfloat code?
Thank you for hanging in there with me on this.
Samantha
You can use any number of clearing methods - overflow: hidden; is the cleanest. However if you can't see it in design view use the <br> style method
inserted between your last floated closing </div> tag and its parent closing </div> tag as below:
</div>
<br style="clear: both;">
</div>

Layer Background color not support on AP Element

Hi I am new to dreamweaver. I just started learning how to
use it, and I can't figure out why when I am validating the
browser, I kept on getting a message that the layer background
color is not supported in the AP element. I looked at my code and
it seems fine. All I did was just insert the AP layer and I change
the background color. Is there something I am doing wrong?

Thank you. That's telling you that layer-background-color is
NOT supported
in those browsers (in fact, it's invalid HTML, being
supported only in IE5
and earlier). You should use CSS to specify colors, not the
Property
inspector, and you will avoid such traps. In fact, in CS3,
when you use the
Property inspector, the proper CSS is written in the
stylesheet for you.
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
==================
"moonstar2005" <[email protected]> wrote in
message
news:ff315r$rvv$[email protected]..
> HI Murray,
>
> My code in the AP element:
>
> Layer-background-color: #ccccc
>
> The message I got when I compare the browser
compatibility is:
>
> "Unsupported property: layer-background-color
>
> Affects: firefox 1.5; internet explore 6.0, 7.0;
internet explore for mac
> 5.2,
> netscape 8.0; opera 8.0, 9.0 safari 2.0 "
>
>

Div Image not showing in Live View

Why can't I see my image placed within a Div tag in Live View? Makes no sense. I've changed the z-index to 1000, also tried 1 nothing changes. Please advise if anyone can help. Thank you!

I've applied BOLD to the Div tag in question
HTML Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>Permanent Concrete and Asphalt Repair Home Page</title>
<meta name="description" content="CeraTech's Pavemend family of high performance concrete repair products have become the choice of professionals across the country for their rapid return to service, versatility, ease of use, and superior durability.">
<style type="text/css">
#apDiv8 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 2;
</style>

<link href="pavmend_styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
#pavemendlogo {
    background-image: url(_images/NEW%202012%20PAVEMEND%20LOGO%20WHITE.png);
    background-repeat: no-repeat;
    height: 78px;
    width: 196px;
#prochoicetype {
    background-image: url(_images/pro_choice_concrete_type.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;
#prochoicetype {
    background-image: url(_images/pro_choice_concrete_type.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;
</style>


</head>
<body>
<div id="wrapper">
<div class="container">
<div id="apDiv1"><a href="pavemend_home_page.html"><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="197" height="79" class="fltlft" /></a>
    <div id="resources"></div>

<div class="headerResources"></div>

<nav>
<ul id="menu">
    <li><a href="pavemend_home_page.html">OUR PRODUCTS ▼</a>
      <ul>
        <li><a href="slq_product_page.html">SLQ<sup>®</sup></a></li>
        <li><a href="sl_product_page.html">SL<sup>®</sup></a></li>
        <li><a href="dotline_product_page.html">DOTLine™</a></li>
        <li><a href="15.0_product_page.html">Pavemend 15.0<sup>®</sup></a></li>
        <li><a href="TR_product_page.html">Pavemend TR<sup>®</sup></a></li>
        <li><a href="VR_product_page.html">Pavemend VR<sup>®</sup></a></li>
        <li><a href="IA_product_page.html">Instant Asphalt™</a></li>
        <li><a href="kemrok_product_page.html">KEMROK™</a></li>
        <li><a href="kemrokVR_product_page.html">KEMROK VR™</a></li>
        <li><a href="firerok_product_page.html">FIREROK™</a></li>
        <li><a href="antiwear_product_page.html">Anti-Wear™</a></li>
        <li><a href="antiscale_product_page.html">Anti-Scale™</a></li>
      </ul>
    </li>
    <li><a href="resources_page.html">RESOURCES</a></li>
    <li><a href="technical_support.html">TECHNICAL SUPPORT</a></li>
    <li><a href="contact_page.html">CONTACT US</a></li>
</ul>
</nav>
    </section>

<div class="sidebarleftlong">
<nav>
    <ul>
      <li><a href="#">PAVEMEND PRODUCT <br>    BROCHURE</a></li>
      <p><li><a href="#">KEEP TRAFFIC MOVING <br>    BROCHURE</a></li></p>
      <p><li><a href="#">CASE STUDIES</a></li></p>
      <p><li><a href="#">INSTANT ASPHALT REPAIR</a></li></p>
      <p><li><a href="#">SL PRODUCT VIDEO</a></li></p>
      <p><li><a href="#">SLQ PRODUCT VIDEO</a></li></p>
      <p><li><a href="#">DOTLINE FIELD <br>    APPICATION VIDEO</a></li></p>
    </ul>
    </nav>
   <div id=""></div>
    </div>


<div class="content">
<p> </p>
<img src="_images/resources_header.png" alt="slheader" width="553" height="31" class="productlogos" />
</section>
<p> </p>
      <section>
        <p><strong>Pavemend</strong><sup>®</sup> Rapid, Permanent Concrete and Asphalt repair products are quickly becoming the choice for Turnpike, State DOT Bridge Crews and discriminating engineers who value superior, permanent repairs and reduced traffic disruptions.</p>
<p>Typical repair applications include full and partial depth bridge deck repairs, bridge header joints, approach slabs, form & pour repairs, dowel bar retrofits, joint nosings and more. <strong>Pavemend</strong><sup>®</sup> products require only the addition of water, with no bonding agents or curing requirements and offer all season rapid repair capability.</p>
<p>Featuring technology developed here in the USA, <strong>Pavemend</strong><sup>®</sup> (by CeraTech Inc) products are easier to use, offer greater durability, provide superior return on investment, and are by far the most sustainable repair products available today.</p>
        <p><img src="_images/Done Smart Logo.png" width="150" height="17" alt="donesmartlogo" />
      </section>
</div>
        
<div class="footer"><img src="_images/NEW 2012 PAVEMEND LOGO WHITE.png" width="160" height="64" class="flt_rgt" />
    <table width="510" summary="footer material">
<tr>
    <td width="210"><strong><em>Manufactured by</em></strong></td>
<tr>
    <td><img src="_images/CTI_logo_white.png" width="200" height="47" alt=""/>
    <td width="50" align="center"><a href="#../twitter.com/Pavemend">Twitter</a>
<div id="apDiv7"></div>
<td><strong><em>Planet Friendly Technology</em></strong></td>
   </tr>
</table>
    <div id="apDivPFT1"></div>
    </div>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* BEGIN HORIZONTAL DROP-MENU */
#menu {
    clear: left;
    position: relative;
    width: 100%; /**adjust width as needed**/
    margin: 0;
    padding: 0;
    background-image: url(_images/topnavpanel.png);
    color: #FFFFFF;
#menu ul {
    margin: 0;
    padding: 0
#menu li {
    list-style: none;
    float: left;
    text-align: center;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    color: #000000;
/**top level menu**/
#menu li a {
    display: inline-block;
    text-decoration: none;
    /* adjust width as needed or use auto */
    width: 13em;
    padding: 8px;
    font-weight: bold;
    line-height: 12px;
    color: #000;
    border-top-style: none;
    font-size: 90%;
    margin-bottom: 0;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 0;
    border-bottom-style: none;
/**top menu style on mouse over**/
#menu li:hover > a {
    color: #FFF;
    width: 13em;
/**sub-menu**/
#menu li ul {
    display: none;
    text-align: center;
    padding: 0;
    margin-bottom: 0;
    margin-left: 40px;
    margin-right: 0;
    margin-top: 0;
    border-bottom-style: none;
/**sub-menu, help for older IE**/
#menu li:hover ul, #menu li.hover ul {
    display: block;
    position: absolute;
    z-index:1000;
    padding: 0;
#menu li:hover li, #menu li.hover li {
    float: none;
    background-color: #E1D5BB;
/**drop-menu style**/
#menu li:hover li a, nav li.hover li a {
    width: 14em; /* adjust width as needed or use auto */
    margin-top: 0;
/**drop-menu style on mouse over**/
#menu li li a:hover {
    color: #FFF;
    background-color: #03C;
/* Clear floated elements at the end*/
#menu:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
/**END HORIZONTAL DROP-MENUS STYLES**/
#apDiv11 {
    position: absolute;
    width: 190px;
    height: 180px;
    z-index: 2;
    background-image: url(_images/WomanPhone.png);
    background-position: 10px;
    background-repeat: no-repeat;
    margin-top: 240px;
#apDivSustainability {
    position: absolute;
    width: 200px;
    height: 420px;
    z-index: 3;
    background-image: url(_images/sustainabilitySB2.png);
    background-repeat: no-repeat;
#apDiv10 {
    position: absolute;
    width: 75px;
    height: 73px;
    z-index: 2;
    background-image: url(_images/PFTLogo.png);
    float: right;
    margin-left: 650px;
    margin-top: -110px;
#apDiv9 {
    position: absolute;
    width: 200px;
    height: 207px;
    z-index: 3;
    background-image: url(_images/slphoto1.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivslqphoto {
    position: absolute;
    width: 200px;
    height: 267px;
    z-index: 3;
    background-image: url(_images/slqphoto.jpg);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivdotlinephoto {
    position: absolute;
    width: 200px;
    height: 267px;
    z-index: 3;
    background-image: url(_images/dotlinephoto.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDiv15photo {
    position: absolute;
    width: 200px;
    height: 179px;
    z-index: 3;
    background-image: url(_images/15.0_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivTRphoto {
    position: absolute;
    width: 200px;
    height: 267px;
    z-index: 3;
    background-image: url(_images/TR_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivAWphoto {
    position: absolute;
    width: 200px;
    height: 150px;
    z-index: 3;
    background-image: url(_images/AWPhoto.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivASphoto {
    position: absolute;
    width: 200px;
    height: 134px;
    z-index: 3;
    background-image: url(_images/ASphoto.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivVRphoto {
    position: absolute;
    width: 200px;
    height: 150px;
    z-index: 3;
    background-image: url(_images/VR_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivIAphoto {
    position: absolute;
    width: 200px;
    height: 162px;
    z-index: 3;
    background-image: url(_images/IA_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivKemrokphoto {
    position: absolute;
    width: 200px;
    height: 207px;
    z-index: 3;
    background-image: url(_images/KEMROK%20pic.jpg);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivFirerokphoto {
    position: absolute;
    width: 200px;
    height: 248px;
    z-index: 3;
    background-image: url(_images/Firerok_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivtechsupportphoto {
    position: absolute;
    width: 200px;
    height: 248px;
    z-index: 3;
    background-image: url(_images/techsupport_photo.png);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDivKemrokVRphoto {
    position: absolute;
    width: 200px;
    height: 207px;
    z-index: 3;
    background-image: url(_images/Kemrok%20VR%20pic.jpg);
    background-repeat: no-repeat;
    margin-top: 30px;
    margin-left: -5px;
#apDiv8 {
    position: absolute;
    width: 180px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/SLbktandbag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 520px;
#apDivslq {
    position: absolute;
    width: 80px;
    height: 105px;
    z-index: 2;
    background-image: url(_images/SLQbucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -125px;
    margin-left: 515px;
#apDivdotlinebag {
    position: absolute;
    width: 88px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/dotlinebag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -165px;
    margin-left: 280px;
#apDivkemrokbag {
    position: absolute;
    width: 121px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/kemrok_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -165px;
    margin-left: 570px;
#apDivPFT1 {
    position: absolute;
    width: 121px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/PFTLogo.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -75px;
    margin-left: 470px;
#apDivkemrokVRbag {
    position: absolute;
    width: 121px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/kemrokvr_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 590px;
#apDivFirerokbag {
    position: absolute;
    width: 90px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/firerok_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 570px;
#apDivAWbucket {
    position: absolute;
    width: 90px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/firerok_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 590px;
#apDivAWbucket {
    position: absolute;
    width: 90px;
    height: 167px;
    z-index: 2;
    background-image: url(_images/firerok_bag.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 590px;
#apDivAWbucket {
    position: absolute;
    width: 80px;
    height: 96px;
    z-index: 2;
    background-image: url(_images/AWbucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -160px;
    margin-left: 590px;
#apDiv15bag {
    position: absolute;
    width: 88px;
    height: 111px;
    z-index: 2;
    background-image: url(_images/15.0bucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -115px;
    margin-left: 260px;
#apDivTRbucket {
    position: absolute;
    width: 80px;
    height: 106px;
    z-index: 2;
    background-image: url(_images/TRbucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -120px;
    margin-left: 370px;
#apDivAWbucket {
    position: absolute;
    width: 205px;
    height: 150px;
    z-index: 2;
    background-image: url(_images/AWArt.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -140px;
    margin-left: 420px;
    font-size: 120%;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
#apDivASArt {
    position: absolute;
    width: 205px;
    height: 150px;
    z-index: 2;
    background-image: url(_images/ASArt.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -140px;
    margin-left: 420px;
    font-size: 120%;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
#apDivVRbucket {
    position: absolute;
    width: 80px;
    height: 87px;
    z-index: 2;
    background-image: url(_images/VRbucket.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -105px;
    margin-left: 470px;
#apDivIAbucket {
    position: absolute;
    width: 251px;
    height: 106px;
    z-index: 2;
    background-image: url(_images/IAbuckets.png);
    background-repeat: no-repeat;
    float: right;
    margin-top: -120px;
    margin-left: 400px;
body {
    background-color: #666;
    color: #000;
    text-align: center;
    background-image: url(_images/roadblurred.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    padding-top: 60px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.4;
.formtext {
    font-size: 100%;
    text-align: left;
.bodyfootnote {
    font-size: 70%;
    margin-left: 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
.red {
    font-size: 70%;
    color: #F00;
.popups {
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
    text-transform: capitalize;
    text-decoration: none;
    list-style: none;
h1, h2, h3, h4, h5, h6, p {
    /* [disabled]margin-top: 0; */     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 23px;
    line-height: 25px;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 100%;
    padding: 5px;
a:visited {
    color: #FFFFFF;
    text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
    background-color: #03C;
    color: #FFF;
    height: 12px;
    alignment-baseline: text-after-edge;
/* ~~this fixed width container surrounds the other divs~~ */
.container {
    width: 960px;
    background-color: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
    background-image: url(_images/Bridge4WebScreened.png);
    background-repeat: no-repeat;
    margin-bottom: 0;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0;
    text-align: left;
.containerTS {
    width: 960px;
    background-color: #FFF;
    margin: 0 0px; /* the auto value on the sides, coupled with the width, centers the layout */
    background-image: url(_images/US_Map.png);
    background-repeat: no-repeat;
    text-align: left;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
    background-color: #000;
    background-image: url(_images/BannerBlured960.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerSL {
    background-color: #000;
    background-image: url(_images/PMND%20SL%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerPurchase {
    background-color: #000;
    background-image: url(_images/contact%20us%20pavemend%20header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerSLQ {
    background-color: #000;
    background-image: url(_images/PMND%20SLQ%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerDOTline {
    background-color: #000;
    background-image: url(_images/DOTLINE%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.header15 {
    background-color: #000;
    background-image: url(_images/PMND%2015.0%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerTR {
    background-color: #000;
    background-image: url(_images/PMND%20TR%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerAW {
    background-color: #000;
    background-image: url(_images/anti_wear_pavemend_header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerAS {
    background-color: #000;
    background-image: url(_images/anti%20scale%20pavemend%20header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerVR {
    background-color: #000;
    background-image: url(_images/PMND%20VR%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerIA {
    background-color: #000;
    background-image: url(_images/Instant%20asphalt%20packaged%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerKemrok {
    background-color: #000;
    background-image: url(_images/KEMROK%20packaged%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerKemrokVR {
    background-color: #000;
    background-image: url(_images/KEMROK%20VR%20packaged%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerFirerok {
    background-color: #000;
    background-image: url(_images/FIREROK%20packaged%20Header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerAntiWear {
    background-color: #000;
    background-image: url(_images/anti_wear_pavemend_header.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerTechSupport {
    background-color: #000;
    background-image: url(_images/FEBlurred.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.headerResources {
    background-color: #000;
    background-image: url(_images/ResourceBanner.png);
    height: 229px;
    background-repeat: no-repeat;
    width: 960px;
.header h1 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20pt;
    font-style: normal;
    font-weight: bolder;
    color: #FFF;
    padding-top: 150px;
    padding-left: 30px;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
    float: right;
    width: 180px;
    margin-left: 0px;
    margin-right: 30px;
    clear: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: italic;
    background-image: url(_images/Testimonialb.gif);
    background-repeat: no-repeat;
    height: 456px;
    text-decoration: none;
    z-index: 1000;
.sidebarPurchase {
    float: right;
    width: 200px;
    margin-left: 0px;
    margin-right: 20px;
    clear: none;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: italic;
    background-image: url(_images/purchaseSB.png);
    background-repeat: no-repeat;
    height: 420px;
    margin-top: 0px;
    text-decoration: none;
    background-color: #217CC0;
    background-position: 10px 10px;
.sidebarleft {
    float: left;
    width: 195px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 85%;
    font-style: oblique;
    height: 200px;
    text-decoration: none;
    padding-top: 8px;
    padding-left: 10px;
    margin-right: 5px;
    background-color: #217CC0;
    vertical-align: bottom;
    line-height: 30px;
    font-weight: bold;
    border-bottom-style: groove;
    border-bottom-width: 10px;
    margin-top: -4px;
.sidebarleftlong {
    float: left;
    width: 195px;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-style: oblique;
    height: 280px;
    text-decoration: none;
    padding-top: 20px;
    margin-right: 5px;
    background-color: #217CC0;
    vertical-align: bottom;
    line-height: 17px;
    font-weight: bold;
    border-bottom-style: groove;
    border-bottom-width: 10px;
    margin-top: -4px;
    color: #FFF;
    font-size: 85%;
    text-align: left;
    padding-left: 10px;
.sidebargreen {
    float: left;
    width: 195px;
    height: 410px;
    text-decoration: none;
    padding-top: 20px;
    margin-right: 5px;
    background-color: #8CC63F;
    border-bottom-style: groove;
    border-bottom-width: 10px;
    margin-top: -4px;
    padding-left: 10px;
.nav2 {
    font-family: bebas-neue;
    font-style: normal;
    font-weight: 400;
    color: #FFF;
.sidebarleft nav ul li a {
    text-decoration: none;
    color: #FFF;
.sidebarleftlong nav ul li a {
    text-decoration: none;
    color: #FFF;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-weight: bold;
.content {
    width: 730px;
    float: left;
    background-image: none;
    background-repeat: no-repeat;
    background-position: left;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    padding: 10px 0;
    text-align: left;
    font-size: 100%;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
    padding: 0 15px 15px 40px;
    text-decoration: none;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    text-decoration: none;
ul.nav li {
    border-bottom: 1px solid #666;
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background-color: #C6D580;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    background-color: #DFEBF3;
    color: #FFF;
    text-decoration: none;
/* ~~ The footer ~~ */
.footer {
    padding: 10px 0;
    position: relative;/* this gives IE6 hasLayout to properly clear */
    clear: both;
    background-color: #000000;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-left: 760px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#apDiv1 {
    position: absolute;
    width: 900px;
    height: 94px;
    z-index: 1;
    margin-top: 80px;
    margin-left: 30px;
    white-space: 3;
    font-size: 100%;
    text-align: left;
sllogo {
    background-image: url(_images/SLwhitelogo.png);
    background-repeat: no-repeat;
.slLogo {
    background-image: url(_images/SLwhitelogo.png);
    background-repeat: no-repeat;
    height: 100px;
    width: 240px;
.productlogos {
    margin-left: 23px;
    margin-top: 10px;
.Bold {
    font-weight: bold;
.inherent {
    font-style: inherit;
sup {
    position: relative;
    top: -1ex;
    vertical-align:baseline;
    font-size: 75%;
#apDiv2 {
    position: absolute;
    width: 650px;
    height: 31px;
    z-index: 2;
    background-repeat: no-repeat;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 15px;
    margin-left: 15px;
    top: 369px;
    background-image: url(_images/homeheader.png);
.footer table tr td {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 75%;
    color: #FFF;
    height: 8px;
    width: 160px;
    margin-left: 10px;
    padding-left: 15px;
    border-collapse: collapse;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 5px;
.footer p {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 80%;
    color: #FFF;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 30px;
.footer table tr th h4 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 75%;
    color: #FFF;
    float: left;
    padding-left: 15px;
    height: 0px;
.footer table tbody tr td a {
    color: #FFF;
#wrapper {
     width:970px; /**adjust as needed**/
     margin:0 auto; /**centers page on screen**/
.flt_rgt {
    float: right;
    margin-top: 15px;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
.title {
    /* [disabled]margin-right: 30px; */
    margin-top: 35px;
    margin-left: 10px;
    background-image: ;
    background-repeat: no-repeat;
    /* [disabled]margin-left: 20px; */
    top: 30px;
    /* [disabled]margin-top: 30px; */
    left: 30px;
.flt_products {
    float: right;
    margin-right: 30px;
    background-image: ;
    background-repeat: no-repeat;
.container section nav {
    background-image: url(_images/topnavpanel.png);
    background-repeat: no-repeat;
    height: 30px;
    width: 960px;
    padding-top: 3px;
#apDiv3 {
    position: absolute;
    width: 468px;
    height: 41px;
    z-index: 2;
    background-image: url(_images/savetimetext.png);
    background-repeat: no-repeat;
    margin-left: 15px;
#apDiv4 {
    position: absolute;
    width: 400px;
    height: 41px;
    z-index: 3;
    background-image: url(_images/ULTRAFLOR.png);
    background-repeat: no-repeat;
    margin-left: 10px;
    margin-top: 45px;
#apDiv5 {
    position: absolute;
    width: 250px;
    height: 103px;
    z-index: 4;
    background-image: url(_images/HI%20RES%20PRODUCT%20FAMILY%20w%20IA.png);
    background-repeat: no-repeat;
    float: right;
    right: auto;
    margin-left: 675px;
    margin-top: -22px;
#apDiv6 {
    position: absolute;
    width: 40px;
    height: 38px;
    z-index: 5;
    background-image: url(_images/PFT%20No%20Text%20No%20Flip.png);
    margin-top: -25px;
    margin-left: 83px;
#apDiv7 {
    position: absolute;
    width: 20px;
    height: 17px;
    z-index: 5;
    background-image: url(_images/twitter-bird-dark-bgs.png);
    margin-top: -15px;
    margin-left: 85px;
nav ul {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the space between the navigation on the content below */
    font-size: 90%;
nav ul li {
    text-decoration: none;
    color: #FFF;
nav ul a:link , nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    text-align: left;
    color: #FFF;
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    color: #FFF;
    text-decoration: none;
.orange {
    color: #FAA634;
.white {
    color: #FFFFFF;
.red {
    color: #F00;
.red1 {
    color: #F00;
.toppanel {
    background-image: url(_images/topnavpanel.png);
    background-repeat: no-repeat;
    height: 30px;
    width: 960px;
#apDiv12 {
    position: fixed;
    width: 960px;
    height: 30px;
    z-index: 5;
    background-image: url(_images/topnavpanel.png);
    background-repeat: no-repeat;
    float: left;
    top: 229px;
.white {
.CeraTechLogo {
    background-image: url(_images/CTI_logo_white.png);
    background-repeat: no-repeat;
    width: 200px;
    height: 60px;
.apDivPFT {
    background-repeat: no-repeat;
    padding-left: px;
    padding-top: 0px;
#prochoicetype {
    background-image: url(_images/pro_choice_concrete_type.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;
#resources {
    background-image: url(_images/ResourcesType.png);
    background-repeat: no-repeat;
    height: 25px;
    width: 521px;
    margin-left: 200px;
    margin-top: -40px;

Help with floating divs

Hi All,
I have given up on the liquid template and now started from scratch with fixed divs.
My problem now is the floating elements.
I adapted this layout to a adobe tutorial with less divs so the floats and clears that the tutorial said some dont work.
Could someone look at my template and check the floating so as it sits like it does and wont move with content added.
I want to add a horizontal spry navigation bar at the bottom like the top but when i add another div it moves eveything and i get an error about 3px line gaps.
If I am not making sense please let me know
Any help would be appreciated.
Thanks in advance
This is my code and css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">
</style>
<script src="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="file:///C|/Users/Nikki/Desktop/tmp/Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="file:///C|/Users/Nikki/Desktop/tmp/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />


<link href="../faarcss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
    font-family: "Myriad Pro";
h1,h2,h3,h4,h5,h6 {
    font-family: "Myriad Pro";
    font-weight: bold;
h1 {
    font-size: 110%;
h2 {
    font-size: 105%;
h3 {
    font-size: 100%;
h4 {
    font-size: 90%;
h5 {
    font-size: 90%;
h6 {
    font-size: 90%;
p {font-size: 90%;
</style>
</head>
<body onload="KW_doClock()">
<div id="wrapper">
<div id="topNav">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Home</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">Finance</a>
        <ul>
          <li><a href="#">Finance Overview</a></li>
          <li><a href="#">More than Just a Mortgage</a></li>
          <li><a href="#">Line Of Credit</a></li>
          <li><a href="#">The Latte Factor</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Insurance</a>
        <ul>
          <li><a href="#">The Importance of Insurance</a></li>
          <li><a href="#">Why do we need Insurance</a></li>
          <li><a href="#">Personal Insurance</a></li>
          <li><a href="#">Health Insurance</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
        <ul>
          <li><a href="#">Creating your financial security</a></li>
          <li><a href="#">Superannuation</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Budgeting</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
        <ul>
          <li><a href="#">Accounting</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Taxation</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Property</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Property Archives</a></li>
          <li><a href="#">Property F.A.Q.</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Legal</a>
        <ul>
          <li><a href="#">Estate Planning</a></li>
          <li><a href="#">Solicitors</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Information</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Seminars</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Media</a>
        <ul>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Untitled Item</a></li>
          <li><a href="#">Media</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">About FAAR</a>
        <ul>
          <li><a href="#">Our Point of Difference</a></li>
          <li><a href="#">Our Undertaking</a></li>
          <li><a href="#">Feedback</a></li>
          <li><a href="#">Site map</a></li>
          <li><a href="#">Contact FAAR</a></li>
</ul>
      </li>
    </ul>
</div>
<div id="logo"><img src="file:///C|/Users/Nikki/Desktop/faar/images/FAAR.logo.jpg" alt="Logo" width="230" height="230" align="left" /></div>
<div id="name">
<img src="file:///C|/Users/Nikki/Desktop/faar.com.au/images/name2.jpg" width="300" height="230" alt="FAAR" /></div>
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="230" id="FlashID" title="Header">
<param name="movie" value="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />

<param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash" data="file:///C|/Users/Nikki/Desktop/faar/newFlash.swf" width="450" height="230">
    
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="file:///C|/Users/Nikki/Desktop/tmp/Scripts/expressInstall.swf" />
    
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    
</object>

</object></div>
<div id="motto">It makes sense to hire an expert - and even more sense to learn from them!</div>
<div id="clock">
    <script language='JavaScript'>
// Kaosweaver Live Clock Start
function class_clock(f,s,c,b,w,h,d,m,g,z) { // Copyright 2002 by Kaosweaver, All rights reserved
    this.b=b;this.w=w;this.h=h;this.d=d;this.g=g;this.z=z
    this.o='<font style="color:'+c+'; font-family:'+f+'; font-size:'+s+'pt;">';
if (m==1) this.o+=doDate("W0",",%20","D1","%20","M0",",%20","Y0",",%20");
var clock=new class_clock("Arial, Helvetica, sans-serif","10","#000000","#FFFFFF","287",1,1,1,0,0)
// If the clock's size needs adjusting, change the 287 above.
d=document
if (d.all || d.getElementById) {d.write('<span id="activeClock" style="width:'+clock.w+'px; background-color:'+clock.b+'"></span>'); }
else if (d.layers) {d.write('<ilayer bgcolor="'+clock.b+'" id="wrapClock"><layer width="'+clock.w+'" id="activeClock"></layer></ilayer>'); }
else {KW_doClock(1);}
function KW_doClock(a) { // Copyright 2003 by Kaosweaver, All rights reserved
    d=document;t=new Date();p="";dClock="";    if (d.layers) d.wrapClock.visibility="show";
    tD=(t.getTimezoneOffset()-(clock.z*60))*clock.g;t.setMinutes(tD+t.getMinutes())
    h=t.getHours();m=t.getMinutes();s=t.getSeconds();if (clock.h)
     {p=(h>11)?"PM":"AM";h=(h>12)?h-12:h;h=(h==0)?12:h;}if (clock.d)
     {m=(m<=9)?"0"+m:m; s=(s<=9)?"0"+s:s;} dClock = clock.o+h+':'+m+':'+s+' '+p+'</font>';
    if (a) {d.write(dClock);}if (d.layers) {wc = document.wrapClock;lc = wc.document.activeClock;
        lc.document.write(dClock);lc.document.close();
    } else if (d.all) {    activeClock.innerHTML = dClock;
    } else if (d.getElementById) {d.getElementById("activeClock").innerHTML = dClock;}
    if (!a) setTimeout("KW_doClock()",1000);
function doDate(){ // Copyright 2002 by Kaosweaver, All rights reserved.
var t=new Date(),a=doDate.arguments,str="",i,a1,lang="1";
var month=new Array('January','Jan', 'February','Feb', 'March','Mar', 'April','Apr', 'May','May', 'June','Jun', 'July','Jul', 'August','Aug', 'September','Sep', 'October','Oct', 'November','Nov', 'December','Dec');
var tday= new Array('Sunday','Sun','Monday','Mon', 'Tuesday','Tue', 'Wednesday','Wed','Thursday','Thr','Friday','Fri','Saturday','Sat');
for(i=0;i<a.length;i++) {a1=a[i].charAt(1);switch (a[i].charAt(0)) {
case "M":if ((Number(a1)==3) && ((t.getMonth()+1)<10)) str+="0";
str+=(Number(a1)>1)?t.getMonth()+1:month[t.getMonth()*2+Number(a1)];break;
case "D": if ((Number(a1)==1) && (t.getDate()<10)) str+="0";str+=t.getDate();break;
case "Y": str+=(a1=='0')?t.getFullYear():t.getFullYear().toString().substring(2);break;
case "W":str+=tday[t.getDay()*2+Number(a1)];break; default: str+=unescape(a[i]);}}return str;
// Kaosweaver Live Clock End
    </script>
    
</div>

<div id="mainContent">
    <p><strong>Template for Financial & Accounting</strong></p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
</div>

<div id="sidebar">
    <ul id="MenuBar2" class="MenuBarVertical">
      <li class="navMenu"><a href="#">Home</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Finance</a>
        <ul>
          <li><a href="#">Finance Overview</a></li>
          <li><a href="#">More Thank Just a Mortgage</a></li>
          <li><a href="#">Line of Credit</a></li>
          <li><a href="#">The Latte Factor</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
      <li class="navMenu"><a href="#" class="MenuBarItemSubmenu">Insurance</a>
        <ul>
          <li><a href="#">Importance of Insurance</a></li>
          <li><a href="#">Why do we need Insurance</a></li>
          <li><a href="#">Personal Insurance</a></li>
          <li><a href="#">Health Insurance</a></li>
          <li><a href="#">Untitled Item</a></li>
        </ul>
      </li>
<li><a href="#" class="MenuBarItemSubmenu">Financial Planning</a>
<ul>
    <li><a href="#">Creating your financial security</a></li>
    <li><a href="#">Superannuation</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Budgeting</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Taxation</a>
<ul>
    <li><a href="#">Accounting</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Property</a>
<ul>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Property Archives</a></li>
    <li><a href="#">Property F.A.Q.</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Legal</a>
<ul>
    <li><a href="#">Solicitors</a></li>
    <li><a href="#">Estate Planning</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Information</a>
<ul>
    <li><a href="#">Seminars</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Media</a>
<ul>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
    <li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#">Site Map</a></li>
<li><a href="#" class="MenuBarItemSubmenu">About Faar</a>
<ul>
    <li><a href="#">Our Point of Difference</a></li>
    <li><a href="#">Our Undertaking</a></li>
    <li><a href="#">Site map</a></li>
    <li><a href="#">Feedback</a></li>
    <li><a href="#">CONTACT FAAR</a></li>
</ul>
</li>
<li><a href="#">Feedback</a></li>
<li><a href="#">CONTACT FAAR</a></li>
    </ul>
</div>
<div id="footer">
<p class="copyright">Copyright © Financial And Accounting Resources 2011
<p class="disclaimer">Disclaimer: Due to the financial industry continually evolving and   changing every effort has been made to ensure the accuracy of the   information contained within ths website. Financial and Accounting   Resources accepts no responsibility or liability for any loss or damage   whatsoever (either directly or indirectly) to any person arising from   the use or reliance on the information contained in this website.
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"/www/tmp/SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID");
</script>
</body>
</html>
CSS.
@charset "utf-8";
/* CSS Document */
body {
    background-color: #FFF;
    padding: 0px;
    margin-top: 25px;
    text-align: center;
    background-image: url(images/watermark.jpg);
    background-repeat: repeat-y;
    background-position: center;
html, body {
    margin: 0px;
    padding: 0px;
#wrapper {
    background-color: #FFF;
    width: 1000px;
    text-align: left;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
#topNav {
    background-color: #00A0C4;
    width: 1000px;
    padding-top: -25px;
    clear: left;
    float: left;
    padding-bottom: 5px;
#logo {
    background-color: #FFF;
    height: 230px;
    width: 230px;
    float: left;
    padding-top: 10px;
#name {
    background-color: #FFF;
    height: 230px;
    width: 300px;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
#header {
    background-color: #FFF;
    height: 230px;
    width: 450px;
    float: right;
    clear: right;
    padding-top: 10px;
#motto {
    background-color: #FFF;
    height: 25px;
    width: 1000px;
    float: left;
    text-align: center;
    color: #000;
    font-weight: bold;
    font-size: 110%;
    font-style: italic;
    padding-top: 15px;
#clock {
    background-color: #FFF;
    height: 30px;
    width: 1000px;
    clear: both;
    float: left;
    font-size: 100%;
    text-align: right;
    font-weight: normal;
    color: #000;
    vertical-align: middle;
    padding-top: 10px;
#mainContent {
    background-color: #FFF;
    height: auto;
    width: 720px;
    float: right;
    margin-bottom: 10px;
    padding-right: 25px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-image: url(images/watermark.jpg);
    background-repeat: repeat-y;
    background-position: center;
    background-attachment: fixed;
    text-align: justify;
#sidebar {
    background-color: #00A0C4;
    width: 225px;
    clear: left;
    float: left;
    height: auto;
    padding: 10px;
ul nav {
    background-color: #00A0C4;
    width: 250px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    list-style-position: inside;
    list-style-type: none;
#footer {
    background-color: #00A0C4;
    height: 100px;
    width: 940px;
    float: left;
    clear: left;
    padding: 10px;
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
sidebar.menu {
    font-size: 100%;
    font-weight: bold;
    color: #FFF;
ul.nav {
    list-style: none; /* this removes the list marker */
    border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
    margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
    border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background: #C6D580;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
    background: #ADB96E;
    color: #FFF;
    float: left;
.navMenu {
    font-size: 100%;
    text-align: left;
    padding-right: -10px;
    color: #FFF;
    font-weight: bold;
.sideNav {
    font-size: 80%;
    text-align: left;
    padding: 10px;
.copyright {
    font-family: "Myriad Pro";
    font-size: 110%;
    font-weight: bold;
    color: #FFF;
    text-align: center;
.disclaimer {
    font-size: 75%;
    color: #FFF;
    text-align: left;
Thank you
muznik

The table is still above the text, not on the side like in the image you sent.
I have the test document in a folder called "Test" in that folder i have a folder named "CSS" where the text document is saved as style.css
The code i have now is below... Not sure what I'm doing wrong :/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<head>
<title>style.css</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="masthead">
    <div id="logo">
    </div>
    <div id="header">
    </div>
</div>
<div id="container">
    <div id="left_col">
      <table width="188" border="1">
      <tr>
        <td>Test 1 </td>
      </tr>
      <tr>
        <td>Test 2 </td>
      </tr>
      <tr>
        <td>Test 3 </td>
      </tr>
      <tr>
        <td>Test 4 </td>
      </tr>
    </table>
    </div>
<div id="page_content" style="overflow: auto;">
      <p>The Department of the Navy desires a tool for analyzing the affects of budgetary changes upon Fire and Emergency Services provided upon Naval Installations throughout the world.   The diversity of these installations suggests that across the board funding changes may affect each location differently. This project presents a Fire Loss Model to support the continued development of the analysis tool.</p>
    </div>
</div>
<div id="footer"></div>
</body>
</html>

Floating divs made to have equal heights

Hi all
Is there a CSS way to get two divs (that will have different
lengths of
text) to have the same height. If not CSS what other
techniques are there to
achieve this - or is it not possible
Thanks
B
http://www.visit-the-coqui.com
If you are thinking of a vacation to Puerto Rico
http://www.thegadgettraveler.com
Travel gadget and other news here

Thanks Osgood - I did not think of the faux column option and
using it for
divs - I'll check that out - thanks
Thanks for the P7 link too
B
http://www.visit-the-coqui.com
If you are thinking of a vacation to Puerto Rico
http://www.thegadgettraveler.com
Travel gadget and other news here
"Osgood" <[email protected]> wrote in
message
news:gbg62d$14n$[email protected]..
>B wrote:
>> Hi all
>>
>> Is there a CSS way to get two divs (that will have
different lengths of
>> text) to have the same height. If not CSS what other
techniques are there
>> to achieve this - or is it not possible
>>
>> Thanks
>>
>
> You can use javascript, read this article about eqaul
height columns
>
>
>
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
>
>
> or you can wrap the two floated <divs> in another
<div> and use a
> repeating background image, google 'faux columns'

Cursor will not go between divs

I have dreamweaver open in design view, it has two block
level divs. I want
to put the cursor between them to add a title to one of the
divs, but DW
will not let me do this. Arrow key, tabbing, etc just takes
me from one div
to the other. Using teh mouse to click between the divs
simply does nothing.
It seems ridiculous to me that an editor this expensive and
popular can't
even allow you to do something so basic. Does anybody know
how to overcome
this (without going in to code view, placeing the cursor in
there, and
coming back to design view) I am in 30 day trial at the
moment and can
safely say that DW is not for me if it can't let me control
where I want to
type.
Heres my code, just in case I am somehow subverting DW's
ability to perform
this simple task:
<div style="background-color:#cccccc;">
<p style="margin:3em">I am a paragraph!</p>
</div>
... SPACE IN DESIGN VIEW
In design view, I want to click and have the cursor appear
right here so I
can beging typing my title
... SPACE IN DESIGN VIEW
<div style="background-color:#cccccc;border:1px
solid;">
<p style="margin:3em">I am a paragraph!</p>
</div>

Click in the first div. Select it on the QuickTag Selector
bar. Push the
right arrow once. Your insertion point will now be between
the two divs.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Arrdvark" <[email protected]> wrote in message
news:ehccao$glg$[email protected]..
> Not sure you are understanding what I mean. Your demo
only shows that you
> have some text between your divs - I can do that much
just by going into
> code view and typing the needed text between the divs.
>
> What I am saying is that DW will not, in design view,
let me physically
> place the cursor (you know, the flashing 'I' thing)
between the 2 divs. I
> have to switch to code view to get into that part of the
document.
>
> I assume you misunderstand completely as you posted a
demo - how could
> your demo possibly show how you managed to position the
cursor while
> designing the document?
>
>
> "Alan Smithee Jr." <[email protected]> wrote in
message
> news:ehc8rn$d86$[email protected]..
>>
http://www.buddhapada.com/tests/aardvark.htm
>>
>
>

Div tags not aligning properly

I can not get my div tags to align properly. I have one div tag set to float left, and the other to float right. I can get the first set to work, but as soon as I add in another set, they both float left. I have played around with margins, borders, and padding and nothing seems to be working. Here is the code:
<style type="text/css">
.pageborder {
width: 795px;
height: 1000px;
border: medium solid #008478;
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
.prodboxleft {
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
background-color: #76c6be;
text-align: left;
width: 369px;
float: left;
height: 150px;
border: medium dashed #008478;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 12px;
padding: 0px;
.prodboxright {
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
background-color: #76c6be;
text-align: left;
width: 369px;
float: right;
height: 150px;
border: medium dashed #008478;
margin-top: 5px;
margin-right: 12px;
margin-bottom: 5px;
margin-left: 5px;
padding: 0px;
</style>
</head>
<body>
<div class="pageborder"><div class="prodboxleft">Content for class "prodboxleft" Goes Here</div>
<div class="prodboxright">Content for class "prodboxright" Goes Here</div>
<div class="prodboxleft">Content for class "prodboxleft" Goes Here</div>
<div class="prodboxright">Content for class "prodboxright" Goes Here</div>
<div class="prodboxleft">Content for class "prodboxleft" Goes Here</div>
<div class="prodboxright">Content for class "prodboxright" Goes Here</div>
</div>

Thank you, unfortunately that is not the issue. The border is set in pixels and it is wide enough to accommodate the floated containers. As I mentioned in my first post, the first set of containers work perfectly, then the second set does not, and yet a third set does. It is almost as if there is something in the middle of the space that is not allowing the containers to behave properly. I have attached a screen shot to show what I am talking about.

Lining up divs inside a main div: Mine not working

Hello, I need help with my CSS design, I am trying to line many dives inside a container DIV, interestingly only the first div is well
positioned, the rest lie outside the container all together. I can't figure out what I am doing wrong. Find attached my CSS definitions and also the related code:
CSS:
/* id the for main container of index page elements */
#indexmain{
background-color:#FFFFFF;
font-weight: bold;
color:#00FF00;
width: 100%;
height: 600px;
border-width: 1px;
border-style: solid;
border-color: red;
/* id for welcome label */
#welcome {
background-color:#FFFFFF;
color:#00FF00;
padding-top: 5px;
padding-right: 5px;
padding-left:5px;
padding-bottom:5px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 140px;
height: 20px;
border-width: 1px;
border-style: solid;
border-color: red;
top: 160px;
left: 120px;
/* id for main container of index elements */
#welcomemain{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 60%;
height: 400px;
border-width: 1px;
border-style: solid;
border-color: red;
top: 192px;
left: 120px;
/* id for description of consumer component */
#consumerdescription{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-right-color:#FF0000;
top: 0;
left:0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
/* id for label of consumer link */
#consumerlink{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-left-color:#FF0000;
background-color:#CCFF66;
top: 0;
right: 0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
/* id for label of business link */
#businesslink{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-right-color:#FF0000;
background-color:#CCFF66;
bottom: 0;
left: 0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
/* id for description of business component */
#businessdescription{
background-color:#FFFFFF;
color:#00FF00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:24px;
font-weight: bold;
width: 50%;
height: 200px;
border-width: 1px;
border-style: solid;
border-left-color:#FF0000;
bottom: 0;
right: 0;
margin-left: auto ;
margin-right: auto ;
text-align:center;
/* id to control positioning of content*/
.centerlinkcontent{
     position:absolute;
     top:80px;
     left: 110px;
.centerdescriptioncontent {
position:absolute;
top:50px;
left:20px;
.titlelabelconsumer{
width:100%;
height:35px;
background-image:url(../images/Isl_bkgrd.jpg);
background-repeat:repeat-x;
text-align:center;
.titlelabelbusiness{
width:100%;
height:35px;
background-image:url(../images/Isl_bkgrd.jpg);
background-repeat:repeat-x;
text-align:center;
top:400px;
.searchresultscontainer{
width:812px;;
height:62px;
border-style:solid;
border-color:#FF0000;}
.searchresultsimg{
width:100px;
height:60px;
background-color:#CCCCCC;
left:0px;
border-style:solid;
border-color:#9966CC;
border-width:1px;
/*.searchresultsdetail{
position:relative;
width:700px;
height:61px;
text-align:center;
background-color:#CCCCCC;
float:right;
left:101px;
margin:0;
padding:0;
.productdescription{
     position:absolute;
     width:300px;
     height:36px;
     text-align:left;
     left:101px;
     margin:0;
     padding-bottom:10px;
    padding-top:12px;
     border-style:solid;
     border-color:#FFCC00;
     border-width:1px;
.productmodelno{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:401px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#996600;
border-width:1px;
.productmodelyear{
     position:absolute;
     width:100px;
     height:36px;
     text-align:left;
     left:501px;
     margin:0;
     padding-bottom:10px;
    padding-top:12px;
     border-style:solid;
     border-color:#00FF00;
     border-width:1px;
.productprice{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:601px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#000033;
border-width:1px;
.productuserid{
position:absolute;
width:100px;
height:36px;
text-align:left;
left:701px;
margin:0;
padding-bottom:10px;
padding-top:12px;
border-style:solid;
border-color:#990000;
border-width:1px;
Related Code:

<div class="searchresultscontainer">
    <div class="searchresultsimg">
           <cfimage source="#ExpandPath('images/consumer/#Cnsmr_ProductIMAGE#')#" action="resize" width="100" height="60" name="resizedImg" format= "jpg">
           <cfimage source="#resizedImg#" action="writeToBrowser">
    </div>
    <div class="productdescription"><font size="+2">#Cnsmr_ProductDESCRIPTION# </font> <font size="+2"></div>
     <div class="productmodelno"><a href="showProductDetail.cfm?Cnsmr_ProductCountID=#URLEncodedFormat(TRIM(Cnsmr_ProductCountID))#">#Cnsmr_ProductMODELNo# </font> </a></div>
     <div class="productmodelyear"><font size="+2">#Cnsmr_ProductMODELYEAR# </font> </div>
     <div class="productprice"><font size="+2">#Cnsmr_ProductPRICE#</font> </div>
     <div class="productuserid"><font color="#000066#" size="+2">#User_id#</font></div>
</div>

</cfoutput>

In addition to PZ's reply, you have way too much going on in your stylesheet ;-) it needs to be streamlined dramatically.
If you don't undersand the how and whys of using AP (absolutely positioned) divs, it's better not to use them - here's why:
Why do my AP Divs (layers) move when I resize the browser window?
You may want to run through a few CSS tutorials before going any further, so as to get your head around how CSS layouts work and how to use a stylesheet effectively :-)
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html http://www.adobe.com/devnet/dreamweaver/articles/bk_dwcs4_mastering_css/bk_dwcs4 _mastering_css_04.pdf
LIST OF CSS TUTORIALS:
http://www.adobe.com/devnet/dreamweaver/css.html

Floating div pushes p content down

Hello,
I have created a floating div that a use to place pictures in
so that the text will flow around it. This all works fine.
However when i place the text within a <p></p>
tag, it forces the text below the picture and not flow around it.
Why might this be? Thanks

Impossible to say without seeing your code....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Si Fi" <[email protected]> wrote in message
news:eqil2v$d80$[email protected]..
> Hello,
>
> I have created a floating div that a use to place
pictures in so that the
> text
> will flow around it. This all works fine.
>
> However when i place the text within a
<p></p> tag, it forces the text
> below
> the picture and not flow around it.
>
> Why might this be? Thanks
>

Divs being removed from parent div when a float style is applied

Divs being removed from parent div when a float style is applied
Hi All,
I hope someone is able to help me with the below issue.
I apologise if the questions I have been asking lately are really basic, I’m just teaching myself web design.
I really do appreciate the help you guys offer, so a big thank you in advance.
I am confused as to why I am not getting my desired effect for the below code. I am creating a website for someone and have structured the website in the following way:
<body>
<div id="wrap">
<div id="title"></div>
<div id="shopping_cart"></div>
<div id="content_wrap">
<h2 class="header">Header goes here</span></h2>
<div id="nav_bar">
<table>table goes here</table>
</div>
<div id="side_bar">
<h1>text here</h1>
<table>table goes here</table>
</div>
<div id="content">
<p>text here</p>
<div id="content_image"></div>
</div>
<div id="footer">
<div id="logo"></div>
<div id="flags"></div>
<div id="v_wd"></div>
</div>
</div>
</div>
</body>
Now I don't know if I am structuring my website the right way this is just the way that makes sense to me. It might not even be the source code that’s the issue and may be the CSS so I have also pasted that in below.
Now the problems I am having are as follows:
I want to have my whole site wrapped in one big div #wrap so I can centre the whole site. Within that div I want all my other divs (which some have divs inside those as well).
To start #title seems to fit inside #wrap without a problem but #shopping_cart gets push outside of #wrap even though it is inside the opening and closing #wrap tag.
My next div #content_wrap, it seems to be inside #wrap however the margin-top I have applied to #content_wrap pushes it down from #title not #shopping_cart even though #content_wrap is below #shopping_cart not #title.
The second problems seem to be with the divs that are or supposed to be inside #content_wrap.
h2 .header seems to fit inside #content_wrap without any problems. Now it gets really confusing, for me anyway. Any div I put below h2 .header which is inside #content_wrap doesn’t seem to actually go inside #content_wrap or #wrap they get pushed below #wrap even though in the source code they are inside the opening and closing div tags.
Also #side_bar and #content together equal 860px which is the width of their surrounding div #content_wrap so they should fit perfectly side by side. This I know ties into a previous discussion I raised in discussion (http://forums.adobe.com/message/4501038#4501038). I have taken Murry’s advice on board from this discussion and tried floating just #side bar to the left and left enough margin for #content to clear, I also tried floating both to the left. Nothing worked.
As I have been writing this I’ve gone through my code, all the above issues only occur if I float a div. If I float a div for some reason it removes that div from any div surrounding it and pushes it below every single div. I don’t know how to position my divs in the exact place I want without floating them but if I float they get moved out of their parent div and therefore aren’t in the position I want them in either.
If you are able to help me resolve this issue it will help me with all future projects. I really do appreciate any help you can give.
Kind Regards
Elliot
CSS
I have marked out where I would float a particular div */style*/ which I know would cancel that style. Therefore the problems I am having are with divs #shopping_cart, #side_bar and #content.
body {
background:url(images/body_bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#wrap {
height:auto;
width:895px;
margin:0 auto;}
#title {
Background-image:url(images/title.png);
height:67px;
width:895px;
margin-top:50px;
margin-left:auto;
margin-right:auto;}
#shopping_cart {
background: url(images/shopping_cart.jpg);
height:46px;
width:142px;
margin-top:15px;
margin-right:25px;
/*float:right;*/}
#content_wrap {
background:url(images/content_bg.png) repeat;
border:2px solid #666;
height: auto;
width:862px;
margin-top:15px;
margin-left:auto;
margin-right:auto;}
#nav_bar {
width:809px;
height:59px;
margin-left:26px;}
#side_bar {
height:auto;
width:285px;
margin-top:20px;
border-right:1px solid #666;
/*float:left;*/}
#content {
height:auto;
width:575px;
margin-top:20px;
/*float:left;*/}
#content_image {
background-image:url(images/couple.jpg);
height:184px;
width:271px;
margin:0 auto;}
#footer {
background-color:#0F0;
width:860px;
height:200px;}
#kejo_logo {
background-image:url(images/kejo.png);
height:100px;
width:227px;}
#flags {}
#viscari_wd {}
#copyright {}
#pp_tu {}
.header {
color: #FFF;
font-size:44px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:10px;}
.header_small {
color: #FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 25px;
margin-left:10px;}
#content_wrap #side_bar h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #4b4a4a;
font-size:20px;
padding-left:15px;}
#content_wrap #content p {
color: #484747;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-right:15px;}

Hi guys,
Thanks for your help but still having a few problems;
In design view the code you advised I should add seems to have placed #shopping_cart back into #wrap under #title and above #content_wrap but hasn't when previewed in browser as there is no margin between #content_wrap & #shopping_cart.
#side_bar and #content now seem to sit side by side each other fine in design view and in the browser, however #footer which is in #content_wrap but under #side_bar and #content is behind #side_bar and #content. How do I get #footer to position under #side_bar and #content?
I have added a green background to #footer to make it stand out. I have also added two images one of the site in design view and one previewed in the browser so you can see the difference. I've also pasted the amended code.
Again thanks for your continued help and advice.
<body>
<div id="wrap">
<div id="title"></div>
<div id="shopping_cart"></div>
<div id="content_wrap">
<h2 class="header">Header goes here</span></h2>
<div id="nav_bar">
<table>table goes here</table>
</div>
<div id="side_bar">
<h1>text here</h1>
<table>table goes here</table>
</div>
<div id="content">
<p>text here</p>
<div id="content_image"></div>
</div>
<div id="footer">
<div id="logo"></div>
<div id="flags"></div>
<div id="v_wd"></div>
</div>
</div>
</div>
</body>
CSS
body {
background:url(images/body_bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#wrap {
width:895px;
margin:0 auto;
overflow:hidden;}
#title {
background:url(images/title.png);
height:67px;
width:895px;
margin-top:50px;
margin-left:auto;
margin-right:auto;}
#shopping_cart {
background: url(images/shopping_cart.jpg);
height:46px;
width:142px;
margin-top:15px;
margin-right:25px;
float:right;}
#content_wrap {
background:url(images/content_bg.png) repeat;
border:2px solid #666;
width:862px;
margin-top:15px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
clear: both;}
#nav_bar {
width:809px;
height:59px;
margin-left:26px;}
#side_bar {
height:auto;
width:285px;
margin-top:20px;
border-right:1px solid #666;
float:left;}
#content {
height:auto;
width:575px;
margin-top:20px;
float:right;}
#content_image {
background-image:url(images/couple.jpg);
height:184px;
width:271px;
margin:0 auto;}
#footer {
background-color:#0F0;
width:860px;
height:200px;}
#kejo_logo {
background-image:url(images/kejo.png);
height:100px;
width:227px;}
#flags {}
#viscari_wd {}
#copyright {}
#pp_tu {}
.header {
color: #FFF;
font-size:44px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:10px;}
.header_small {
color: #FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 25px;
margin-left:10px;}
#content_wrap #side_bar h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #4b4a4a;
font-size:20px;
padding-left:15px;}
#content_wrap #content p {
color: #484747;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-right:15px;}

Nested DIV's Not Centering

Hello,
On my page I'm working on, one of my div's is not centering correctly. The class applied has margin set to auto, but the image in the tag is still justifying to the left. The class the is not displaying correctly is .portfolio-center.
Here is the page:
http://littlechisel.com/clients/little-chisel-new/print.html
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/little-chisel-styles.css" rel="stylesheet" type="text/css" />

<title>Little Chisel Design Print</title>



<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30573696-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</head>
<body onload="MM_preloadImages('images/print-over.jpg','images/web-over.jpg','images/logos-over .jpg','images/bus-id-over.jpg','images/photo-ret-over.jpg','images/about-over.jpg','images /contact-over.jpg','images/facebook-over.jpg','images/twitter-over.jpg','images/linked-in- over.jpg','images/pinterest-over.jpg')">
<div id="wrapper">
          <div id="header">
              <div id="header-box">
                  <div id="template-social-media-links"><a href="https://www.facebook.com/pages/Little-Chisel-Design/194073243948201?ref=stream&__req=r" target="new" onmouseover="MM_swapImage('facebook','','images/facebook-over.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/facebook.jpg" alt="Facebook" width="31" height="29" id="facebook" /></a><a href="https://twitter.com/ChiselDesign" target="new" onmouseover="MM_swapImage('twitter','','images/twitter-over.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/twitter.jpg" alt="Twitter" width="31" height="29" class="social-media-links" id="twitter" /></a><a href="http://www.linkedin.com/profile/view?id=117449571&goback=%2Enmp_*1_*1_*1_*1_*1_*1_*1_*1_*1 &trk=spm_pic" target="new" onmouseover="MM_swapImage('linked-in','','images/linked-in-over.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/linked-in.jpg" alt="Linked In" width="31" height="29" class="social-media-links" id="linked-in" /></a><a href="http://pinterest.com/littlechisel/" target="new" onmouseover="MM_swapImage('pinterest','','images/pinterest-over.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/pinterest.jpg" alt="Pinterest" width="31" height="29" class="social-media-links" id="pinterest" /></a></div>
                        <div id="template-header"><a href="index.html"><img src="images/logo.jpg" width="466" height="174" alt="logo" /></a><img src="images/tagline.jpg" alt="Shaping Ideas Into Graphic Art" width="391" height="110" class="tagline" /></div>
                        <div id="template-nav-bar">
                                    <div id="template-nav-bar-color"></div>
                                    <div id="template-nav-bar-links"><a href="print.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('print','','images/print-over.jpg',1)"><img src="images/print.jpg" alt="Print" width="54" height="26" id="print" /></a><a href="web.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('web','','images/web-over.jpg',1)"><img src="images/web.jpg" alt="Web" width="53" height="26" id="web" /></a><a href="logos.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logos','','images/logos-over.jpg',1)"><img src="images/logos.jpg" alt="Logos" width="58" height="26" id="logos" /></a><a href="business-identity.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('business-id','','images/bus-id-over.jpg',1)"><img src="images/bus-id.jpg" alt="Business Identity" width="116" height="26" id="business-id" /></a><a href="photo-retouching.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('photo-ret','','images/photo-ret-over.jpg',1)"><img src="images/photo-ret.jpg" alt="Photo Retouching" width="122" height="26" id="photo-ret" /></a><a href="http://about.me/kathy.moncelsi" target="new" onmouseover="MM_swapImage('about','','images/about-over.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="images/about.jpg" alt="About Me" width="77" height="26" id="about" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact-over.jpg',1)"><img src="images/contact.jpg" alt="Contact" width="77" height="26" id="contact" /></a></div>
                          </div>
                    </div>
          </div>

<div id="content">
          <div id="content-box">
            <div class="portfolio-text-first">
                              <p class="category">PRINT DESIGN</p>
                        <p class="title">Here's to Good Food<br />
                          <span class="description">Cookbook Cover</span></p>
            </div>
                              <div class="portfolio-full-width"><img src="images/print-htgf.jpg" width="709" height="510" alt="Heres to Good Food Book Cover" />
            </div>
            <div class="portfolio-text">
<p class="title">A Movie Lover's Guide to Film Language<br />
<span class="description">One Sheet DVD Promotion</span></p>
                                </div>
            <div class="portfolio-center"><img src="images/print-movie-lovers-onesheet.jpg" width="485" height="627" alt="Movie Lovers One Sheet" />
            </div>
                              <div class="portfolio-text">
<p class="title">Kaya Mansa Wellness<br />
<span class="description">Business Card and Label Design</span></p>
                                </div>
            <div class="portfolio-print">
                                        <div class="print-left"><img src="images/print-kaya-lily.jpg" width="350" height="255" alt="Asian Lily Label" />
                                        </div>
                                 <div class="print-right"><img src="images/print-kaya-cedar.jpg" width="350" height="255" alt="Atlas Cedarwood Label" />
                        </div>
                                        <div class="kaya-print-left-bottom"><img src="images/print-kaya-berry.jpg" width="350" height="255" alt="Goji Berry Label" />
                                        </div>
                                        <div class="kaya-print-right-bottom"><img src="images/print-kaya-lavender.jpg" width="350" height="255" alt="Lavender Label" />
                </div>
                                        <div id="print-kaya-card"><img src="images/print-kaya-card.jpg" width="407" height="233" alt="Kaya Mansa Business Card" /></div>
                              <div class="portfolio-text">
<p class="title">Silver Line Windows<br />
<span class="description">Mailers, Literature and Sales Catalog Covers/Pages</span></p>
                                </div>
            <div class="portfolio-print">
                                          <div class="print-left"><img src="images/print-sl-mailer1.jpg" width="350" height="453" alt="Trade Show Mailer 1" />
                                        </div>
                                         <div class="print-right"><img src="images/print-sl-mailer2.jpg" width="350" height="453" alt="Trade Show Mailer 2" />
                                        </div>
                              </div>
                              <div class="portfolio-print-under">
                         <div class="print-left-pitch-cvr"><img src="images/print-sl-pitchcover.jpg" width="406" height="382" alt="Sales Catalog Cover" />
                                        </div>
                                        <div class="print-right-pitch-page"><img src="images/print-sl-pitchpage.jpg" width="292" height="382" alt="Sales Catalog Page" />
                        </div>
                              <div class="portfolio-print-under">
                                        <div class="print-left"><img src="images/print-sl-bindercover.jpg" width="350" height="364" alt="Sales Binder Cover" /></div>
                <div class="print-right"><img src="images/print-sl-binderback.jpg" width="350" height="364" alt="Sales Binder Back" /></div>
                              </div>
            <div class="portfolio-print-under">
              <div class="print-left"><img src="images/print-sl-8500cover.jpg" width="350" height="458" alt="Series 8500 Literature Cover" /></div>
              <div class="print-right"><img src="images/print-sl-8500page.jpg" width="350" height="458" alt="Series 8500 Literature Page" /></div>
            </div>
                              <div class="portfolio-text">
<p class="title">Windows Plus<br />
<span class="description">Weather-Weld Literature</span></p>
                              </div>
            <div class="portfolio-center"><img src="images/print-sl-weatherweld-cvr.jpg" width="350" height="442" alt="Weather Weld Literature cover" /></div>
            <div class="portfolio-full-width"><img src="images/print-sl-weatherweld-pages.jpg" width="709" height="461" alt="Weather Weld Literature Pages" /></div>
            </div>
                              </div>
          </div>
</div>

          <div id="footer">
                      <div id="template-footer">
                        <div id="template-footer-links"><a href="index.html">Home</a> | <a href="print.html">Print</a> | <a href="web.html">Web</a> | <a href="logo.html">Logos</a> | <a href="business-id.html">Business Identity</a> | <a href="photo.html">Photo Retouching</a> | <a href="http://about.me/kathy.moncelsi" target="new">About Me</a> | <a href="contact.html">Contact</a></div>
                                <div id="template-footer-left">Little Chisel Design | <a href="mailto: [email protected]">[email protected]</a> | 848.219.2385</div>
                               <div id="template-footer-right">©2013 All Rights Reserved | Web Design by Little Chisel Design</div>
                    </div>
          </div>
</div>
</body>
</html>
@charset "utf-8";
.portfolio-text-first {
          font-family: Tahoma, Geneva, sans-serif;
          margin-right: 137px;
          margin-left: 137px;
          padding-top: 10px;
          color: #7B0909;
.portfolio-print-under {
          width: 983px;
          margin-top: 10px;
.print-right-pitch-page {
          width: 846px;
          margin-left: 554px;
.print-left-pitch-cvr {
          float: left;
          width: 406px;
          margin-right: 10px;
          margin-left: 137px;
.kaya-print-right-bottom {
          width: 847px;
          margin-left: 497px;
          margin-top: 10px;
#print-kaya-card {
          width: 407px;
          margin-left: 288px;
          margin-top: 10px;
.kaya-print-left-bottom {
          float: left;
          width: 350px;
          margin-right: 10px;
          margin-left: 137px;
          margin-top: 10px;
#index-footer {
          font-family: Tahoma, Geneva, sans-serif;
          font-size: 10px;
          color: #7b0909;
          font-weight: bold;
          margin-right: auto;
          margin-left: auto;
          width: 983px;
          margin-top: 10px;
html,
body {
          margin: 0;
          padding: 0;
          height: 100%;
          background-image: url(../images/sand-texture.jpg);
          background-repeat: repeat;
          background-attachment: fixed;
#wrapper {
          min-height: 100%;
          position: relative;
#wrapper-index {
          width: 983px;
          margin-right: auto;
          margin-left: auto;
#header {
          padding-top: 10px;
          padding-bottom: 0px;
          padding-left: 0px;
          background-image: url(../images/sand-texture.jpg);
          background-repeat: repeat;
          width: 100%;
          background-attachment: fixed;
          margin-right: auto;
          margin-left: auto;
#content {
          padding-bottom: 35px;
          width: 983px;
          margin-right: auto;
          margin-left: auto;
          background-attachment: fixed;
#footer {
          width: 100%;
          height: 35px;
          position: fixed;
          bottom: 0;
          left: 0;
          background-image: url(../images/sand-texture.jpg);
          background-repeat: repeat;
          padding-top: 15px;
          padding-bottom: 5px;
.portfolio-full-width {
          width: 846px;
          margin-left: 137px;
          margin-top: 10px;
          margin-bottom: 20px;
.print-left {
          float: left;
          width: 350px;
          margin-right: 10px;
          margin-left: 137px;
.print-right {
          width: 847px;
          margin-left: 497px;
#template-social-media-links {
          width: 133px;
          margin-top: 5px;
          margin-left: 850px;
#index-social-media-links {
          width: 983px;
          margin-right: auto;
          margin-left: auto;
#header-box {
          margin-left: auto;
          width: 983px;
          margin-right: auto;
#template-header {
          width: 983px;
.tagline {
          margin-left: 126px;
#template-nav-bar {
          width: 983px;
#template-nav-bar-color {
          background-color: #7b0909;
          height: 26px;
          width: 426px;
          float: left;
#template-nav-bar-links {
          background-color: #7b0909;
          height: 26px;
          width: 557px;
          margin-left: 426px;
.social-media-links {
          margin-left: 3px;
#template-movie {
          height: 355px;
          width: 983px;
#template-editable-area {
          width: 983px;
          margin-right: auto;
          margin-left: auto;
#content-box {
          margin-right: auto;
          margin-left: auto;
          width: 983px;
.category {
          font-size: 16px;
          font-weight: bold;
.title {
          font-size: 13px;
          font-weight: bold;
#template-footer {
          font-family: Tahoma, Geneva, sans-serif;
          font-size: 10px;
          color: #7b0909;
          font-weight: bold;
          margin-right: auto;
          margin-left: auto;
          width: 983px;
#template-footer-left {
          width: 491px;
          float: left;
#template-footer-right {
          width: 492px;
          margin-left: 491px;
          text-align: right;
a {
          color: #7D441F;
a img {border: none;
a:link {
          text-decoration: none;
a:visited {
          text-decoration: none;
          color: #7D441F;
          border: none;
    outline: none;
a:hover {
          color: #7B0909;
          border: none;
          outline: none;
a:active {
          text-decoration: none;
          color: #7D441F;
          border: none;
    outline: none;
#index-squares {
          height: 355px;
          width: 983px;
#portfolio-print {
          width: 983px;
.portfolio-text {
          font-family: Tahoma, Geneva, sans-serif;
          margin-right: 137px;
          margin-left: 137px;
          padding-top: 10px;
          color: #7B0909;
          margin-top: 20px;
.portfolio-center {
          width: 983px;
          margin-left: auto;
          margin-right: auto;
.portfolio-print {
          width: 983px;
          margin: auto
.description {
          font-size: 13px;
          font-style: italic;
          font-weight: normal;
#template-footer-links {
          width: 983px;
          text-align: center;
          margin-bottom: 10px;
          font-size: 11px;
.slideshow {
          height: 355px;
          width: 983px;
          margin: auto;
          background-color: #7B0909;
          background-image: url(../images/index-squares-bkrd.jpg);
Thank you!

Use text-align center and apply the center class to a paragraph tag.
.center {text-align:center}
<p class="center"><img src="images/print-movie-lovers-onesheet.jpg" alt="Movie Lovers One Sheet" height="627" width="485"></p>
Nancy O.

Novice.... cannot create a floating div on top of image for my paragraph

how can i insert a section of writing over the top of my image? below is obviously what i have for my image,
<img src="images1/logo.jpg" alt="" width="1000" height="418" class="logo" /><br />
i need a paragraph of text to go over the top of that, but when i insert a new ap div it goes above that or below that i need it to float over the top.
the easier option i feel is with the image im using is just to type the text in the image, but i fear this is bad designing and it would not display correctly with certain browsers?? am i correct
because i am new to this whole thing i am struggling to find the right words to explain this, i hope this makes sense.

ok this is my html im amazed i have got this far, the reason im struggling is because my idea has changed halfway through and im struggling to remember what to put where to achieve what i want,
now then where i have inserted an image width 523 height 418 leaves a gap beside it which is 477 i need to fill that 477 gap with 2 divs (boxes) 1 on top of the other the top box will have an image, the box below that will have some text. this is where i am now stuck,
i have attached a jpeg image to this reply so you can see how the website has layed out so far, the red box i have highlighted in the jpeg is what i am trying to achieve, can you tell me what i need to put where to achieve that?
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
</head>
<body id="index_1" onload="new ElementMaxHeight();">
<div id="main">

<div id="header">
<div class="menu">
<ul>
<li><a href="index.html">Home page</a></li>
<li class="active"><a href="index-1.html">About Us</a></li>
<li><a href="index-2.html">Gallery</a></li>
<li><a href="index-3.html">Services</a></li>
<li><a href="index-4.html">Articles</a></li>
<li class="last"><a href="index-5.html">Contact us</a></li>
</ul>
</div>
<img src="images1/islandlogo.jpg" alt="" width="523" height="418" class="logo" /><br />
</div>

<div id="middle">
<div class="container">
<div class="column1 maxheight">
<div class="indent">
<div class="title1">
<div class="inner">
<h2>Biography</h2>
</div>
</div>
<div class="content">
<a href="#" class="fs14">Sed ut perspiciatis undesuser lerase</a><br />
Lum mleie kertase miaserillus lerasert sere nertas um sociis natotdisrie jertas leraaerts keyuaroonec accnec porta ter.<br />
<div class="imgtext">
<img alt="" src="images1/page2_img1.jpg" class="imgindent" />
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul><br class="clear" />
</div>
</div>
</div>
</div>
<div class="column2 maxheight">
<div class="indent2">
<div class="title2">
<div class="inner">
<h2>My Experience</h2>
</div>
</div>
my experience to go in here
<div class="container">
<ul class="col1">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<ul class="col2">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<br class="clear" />
</div>
a brief description here<br />
<a href="#" class="more">read more</a><div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</div>

<div id="footer">
<div class="container">
<div class="column1">
up and down © 2008 | <a href="index-6.html">Privacy policy</a>
</div>
<div class="column2">
<div class="home">21 chapel Street Second Floor<br />
norwich</div>
</div>
<div class="column3">
<span class="phone">Tel./Fax 01603872094</span>
</div>
<br class="clear" />
</div>
</div>

</div>
</body>
</html>

PLEASE HELP! How do I make BC not render a div if there is no content?

I have a problem that I suspect I need JQuery for, unless someone can suggest a nifty workaround:
On my ecommerce online shop layout template, I have it set up so that there's a category description first, that floats to the left, and then floating to the right of that, is my cataloguelist div class and my productlist div class below that.
As shown here:
on a page that has no subcategories: http://bevisco.businesscatalyst.com/products/storage/caddies
on a page that has subcategories, but no other products: http://bevisco.businesscatalyst.com/products/seating
This is how I've got the html on my shop layout template:
<div class="shop-main clear">
<div class="cat_description">{tag_cataloguebreadcrumbs}{tag_description}</div>
<div class="catalogue_list">{tag_cataloguelist,4,,24,,true,}</div>
<div class="prod_list">{tag_productlist,4,,24,,true,}</div>
<div class="footer clear">{tag_previouspage,<img alt="" src="/CatalystImages/module_previous.png" />}{tag_pagination}{tag_nextpage,<img alt="" src="/CatalystImages/module_next.png" />}</div>
</div>
What I want is for {tag_cataloguelist} and {tag_productlist} and their containing divs to not show at all if there is no content for them...
Is it possible? Is there anyoneone able and kind enough to please help me? I don't know javascript, but am happy to use it if someone can show me what I need.
Thank you.

Hi Carol,
I've read the rule of the commas for modules, but not for tags ... so thought maybe this is why is not working ... but again, I'm just trying to figure it out.
I'm still confusing about when and how use modules and tags properly.
I've found this short guide for TAGS that says literaly:
"Note: Tags are not transferrable and cannot be shared across all modules. Use the specific tags listed with each module as shown below: "
http://kb.worldsecuresystems.com/134/bc_1342.html?bc-partner
You may access through your BC aacount ... search by "Tags - Quick Reference" ... this is a little different that the one from ADOBE site.
You'll see that the tags can be customizable by modules and not the way you are doing.
HOWEVER, take a look at another short guide that might give you another options ... I'm gonna try this too.
This is at http://forums.adobe.com/docs/DOC-2721 .... scroll down until STEP 4 and see some customizations for Product Tags
I have a similar case like yours .... I want to show discounts and previous prices only on Sale items ... like I do at http://tesonline02.businesscatalyst.com/outerwear/avatar ... and hide all these for regular items.
Haven't found a clear tutorial, neither the responses are completly satisfactory... someone told me use the tag_sale and the rest through CSS ... but ... how??? ... this is so frustrating
.. have you found a good tutorial?
I'm trying to find a response for that ... keep you posted so you may apply it in your case.
Regards!!
Eva

Why is the length of a floated div ignored by the outer wrapper?

I'm having a hard time understanding whether floated elements are relatively or absolutely positioned.
When I do a "float:right" on a narrow column, the text outside that column seems very aware of its existence. It won't appear under it - it will instead wrap around it. It will make room for it.
However, the outer wrapping div ignores the floated div completely. It will only take into account (and accomodate for) whatever amount of text is NOT in that inner floating div.
Example :
<div class="wrapper">
<div style="float:right">
Float right contents.
</div>
This is the content that isn't floating right.
</div>
If the right-floated contents are longer than the content that isn't floated right, the outer wrapper ignores it. It will only accomodate the text that isn't being floated. If the floated text exceeds the non-floating text, the floating text will bleed outside the outer wrapper.
How do I make the outer wrapper accomodate the right-floated div as well?

I'm having a hard time understanding whether floated elements are relatively or absolutely positioned
Neither. Floats are floats. The take content out of the normal flow. For this reason, you must clear floats after they are no longer needed. I typically use a br, p or hr tag with a clearing class like so:
CSS:
.clearFloat {clear:both; height 1px; visibility: hidden}
HTML:
<hr class="clearFloat" />
Floats and Margins Demo.
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Background div do not support floating divs

Similar Messages

Maybe you are looking for