DIV tags disappears in 3.1

Hi
I have a report region in which I have following defined in the "Break Formatting" section:
<br>
"Display this text when printing report sums":<br>
&lt;div id="FinalSum"><br>
<script type="text/javascript"><br>
var lastRow=html_CascadeUpTill('FinalSum','TR');<br>
lastRow.style.backgroundColor='#CCCC99'; <br>
lastRow.style.color='red';<br>
</script><br>
Totalt Personal Antal<br>
&lt;/div><br>
<br>
This formats the last last row of the report nicely in ApEx 3.0.1. But the exact same code in ApEx 3.1 doesn't work. When I look on the generated HTML source I can see that the DIV tags including the contained SCRIPT tags are gone(!). Because of that you only see the javascript code followed by "Totalt Personal Antal" on the last row.
Is this a bug in 3.1? Does anyone have workaround proposal?
kind regards // Frederic

I solved my self ;)
There is something strange with version 3.1 that removes some tags in the report breaking sections. I solved by it with this javascript:
function setBreakStyle(p_class, p_break, p_totalbreak, p_totalbg) {
     var i, l_cell;
     var l_table = getElementsByClass(p_class)[0];// the class of the table          
     for(i=0; i< l_table.rows.length; i++){
          l_cell = l_table.rows.cells[0]          
          // Set styles for heading breaks
          if ( $u_SubString(l_cell.innerHTML, p_break) ) { // The cell is found                                             
               $x_Style(l_cell, 'color', 'gray');
               $x_Style(l_cell, 'textAlign', 'right');
               $x_Style(l_cell, 'fontStyle', 'italic');
          // Set styles for page break
          if ( $u_SubString(l_cell.innerHTML, p_totalbreak) ) { // The cell is found                                             
               $x_Style(l_table.rows[i], 'backgroundColor', p_totalbg);
               $x_Style(l_table.rows[i], 'color', 'red');               

Similar Messages

  • DIV tags disappear when put over swf file background

    I am working on a site which has a swf movie as a background
    which fills the browser window(SWFobject). When I place DIV tags,
    which reference a CSS id and contain swf files as well, over the
    top (for absolute positioning, etc.) they disappear when previewed
    in a browser . Is there a reason that the swfobject always takes on
    top position in the browser? Do I need to change something in the
    SWFoject javascript file, in the code or within either the CSS file
    or the dreamweaver HTML code? Here is a link to a site that is very
    similar to what I am working on.
    http://www.pronghornclub.com
    Any help would be most appreciated.

    All Active content on a page will always rise to the top, so
    to speak,
    including Flash, certain form elements, Java applets, and
    Active X controls.
    This means that each of these will poke through layers. There
    is not a good
    cross-browser/platform reliable way to solve this issue, but
    if you can be
    confident in your visitors using IE 5+ or NN6+, then you can
    use the Flash
    wmode parameter (however, Safari does not support this
    properly!).
    Adobe articles:
    http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_15523
    http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14201
    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
    ==================
    "jlrowedog" <[email protected]> wrote in
    message
    news:fb53q0$akk$[email protected]..
    >I am working on a site which has a swf movie as a
    background which fills
    >the
    > browser window(SWFobject). When I place DIV tags, which
    reference a CSS
    > id,
    > over the top (for absolute positioning, etc.) they
    disappear when
    > previewed in
    > a browser. Is there a reason that the swf file always
    takes on top
    > position in
    > the browser? Do I need to change something in the
    SWFoject javascript
    > file, in
    > the code or within either the CSS file or the
    dreamweaver HTML code? Here
    > is a
    > link to a site that is very similar to what I am working
    on.
    >
    >
    http://www.pronghornclub.com
    >
    > Any help would be most appreciated.
    >
    >
    >

  • How to auto adjust the height of my div tag?

    This is my website www.whistleandlisten.com
    The white background is a div tag and whenever I add new content within the div tag I want it to auto adjust to extend the white div tag down as the page gets longer. I have tried css and set my height to auto but that makes it disappear. Right now I have to set it to a certain amount of pixels which gets annoying and sometimes I forget to after adding lots of content. PLEASE HELP.

    To have an extensible height element, you should not apply the height property as you have done starting at line 9 of songcss.css
    #whitediv
      position: absolute;
      left: 50%;
      margin-left: -490px;
      top: 0px;
      width: 950px;
      height: 2900px;
      z-index: 1;
      background-color: #ffffff;
      background-image: none;
      background-repeat: repeat;
      background-attachment: scroll;
      background-position: 0% 0%;
      background-clip: border-box;
      background-origin: padding-box;
      background-size: auto auto;
      color: #ffffff;
      box-shadow: #ffffff;
      overflow-x: visible;
      overflow-y: visible;

  • Green highlight when working with Fluid Grid Layout Div tags

    What does the green highlight mean when working in Live view of a Fluid Grid Layout using Fluid Grid Layout Div Tags? Sometimes they show up, but sometimes they don't. I think it has something to do with the width setting but I can't figure out what the rule is or what the highlight indicates.
    Dreamweaver CS6
    Mac OSX 10.8.2
    THANK YOU!!

    Brian McNay wrote:
    the green highlight sometimes disappears when modifying the width property of the div. My question is what does this signify?
    If you change the width of a div manually in Code view or in the CSS styles panel, Dreamweaver ceases to treat it as a fluid grid layout div, and the green highlighting disappears.
    To be treated as a fluid grid layout div, the width must be adjusted by dragging the handles in Design view. Dreamweaver snaps fluid grid layout divs to the grid that is defined when you first create the page, and it calculates the width and margins to many decimal places. If the width and/or margin doesn't match the grid dimensions, the highlighting disappears, and the div is treated as any other div.
    It's not a bug, nor are fluid grid layout divs any different from normal ones. The idea of the grid and the highlighting is to allow you to create a responsive layout according to a hypothetical grid. Once you've created the basic structure, it's best to turn off the visual guides anyway.
    Personally, I think that the implementation of fluid grid layouts in Dreamweaver CS6 leaves a lot to be desired. The basic idea is good, but it's difficult to use if you don't have a solid understanding of CSS.

  • Editable bg color in div tag

    Hello,
    I am trying to create an editable background color within the
    div tag of the top portion of my webpage. I have a banner image and
    I would like not only it, but also its associated bkgd color to be
    easily changeable from page to page. So I am trying to have these
    appear within an editable region (the div) of my template. It looks
    like it works in design view, but when I preview it in a browser,
    although the image shows up ok, the background color disappears
    here is the code in question:
    <!-- TemplateBeginEditable name="bannerimg" -->
    <div id="header" bgcolor="6999bc">
    <img src="../imgs/banr_genl_6999bc.gif" alt="banner
    image" width="687" height="118" />
    <!-- end #header --></div>
    <!-- TemplateEndEditable -->
    Any suggestions?
    Many thanks!
    Alan

    > Maybe how
    > I have typed the code for this tag is where I have
    erred...?
    I would think so, yes.
    > I think I may have found a workaround though - I created
    a separate
    > editable
    > region in the head of the template and placed the
    bgcolor reference there,
    > within opening and closing style tags.. that seems to
    work although its
    > not
    > quite as tidy.
    It's actually much more tidy, and it's how you should always
    do such things.
    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
    ==================
    "alan kirker" <[email protected]> wrote in
    message
    news:fc2402$ltt$[email protected]..
    > Thanks Murray,
    > That is what I would expect as well and its what I
    want... however, when I
    > apply the template with this code to a page, and then
    test it by browsing
    > it
    > locally, the image appears, but the bkgd color does
    not... And although
    > its
    > technically "editable" for the reason you point out,
    changes made to the
    > hex
    > value still yield no color behind the image. Even when I
    add the "#" or
    > try
    > using "background-color" instead of "bgcolor" as the
    attribute name. Maybe
    > how
    > I have typed the code for this tag is where I have
    erred...?
    >
    > I think I may have found a workaround though - I created
    a separate
    > editable
    > region in the head of the template and placed the
    bgcolor reference there,
    > within opening and closing style tags.. that seems to
    work although its
    > not
    > quite as tidy.
    >
    > many thanks for your help... if you have additional
    suggestions, I am all
    > ears,
    > Alan
    >

  • Hidden and visible div tags, transparence and links - HELP....

    I am showing different products in div tags that are controlled by simple javascript. I would like to add text links to open a new div tag about the related products, but also hide the original div tag that the link is placed on.
    Please check this page out
    http://www.aestheticgroup.fr/New/Inex/Inex_lipoAspirationR.html
    and then click on the image for
    CANULES D’ASPIRATION PROXIMALE
    and then click on the text link:
    manche BD 300 10
    You will understand my problem. I'm trying to make this div tag (Canule d’aspiration Proximale) disappear instead of having them stack one on top of the other.
    Do you have an idea of how I can add multiple functions to one click (close the div tag and open a new one at the same time)?
    Thank you for your help!
    Sooooophie

    Hi Sophie,
    I downloaded your site and yes, there was a typo in the script...
    The script should read...
    var curOverlay = null;
    function overlay( aOly) {
      var el = document.getElementById(aOly);
      if (curOverlay) curOverlay.style.visibility = "hidden";     // THIS LINE HAS CHANGED
      if (curOverlay != el) {
        el.style.visibility = "visible";
        curOverlay = el;
      else
        curOverlay = null;
    I also realize that wherever you call an overlayXX function that you are currently using, you'll need to replace it with a call to overlay('overlayXX')
    I needed to add this to your onclick attribute for the close button... I tested this and it seems to work for the existing page.
    here are the snippets from your page that I changed
          <div id="Groups02"><a href='#' onclick='overlay("overlay02")' onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','images/LipoReutilisable02B.jpg',1)"><img src="images/LipoReutilisable02.jpg" name="Image21" width="170" height="120" border="0" id="Image21" /></a>
            <p>CANULES D&rsquo;ASPIRATION <br />
            UN ORIFICE</p>
          </div>
    and for the close button:
       <div id="close02"><a href='#' onclick='overlay("overlay02")' onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image43','','images/close.jpg',1)"><img src="images/close02.jpg" name="Image43" width="72" height="20" border="0" id="Image43" /></a></div>
    You'll need to change this wherever you reference each overlay, in this case, it was for overlay02.  The good news is you'll only need this function and not one function per overlay as you have now.
    As I said in the previous post, I am off on vacation for a little over a week.
    Good Luck!

  • What's wrong with my div tag / site won't center....

    Hi,
    I am re-designing a website and I cannot get it to center.  I created a div tag and id it "wrapper" and created a css rule.  I am sure its a simple mistake, but I cannot figure it out.....
    Here is the CSS rules...
    @charset "UTF-8";
    /* CSS Document */
    div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
              margin: 0px;
              padding: 0px;
    #wrapper{
              margin: 0, auto;
              background-color: #9B9E6B;
    ul {
              list-style: none;
    table#content1{
              background-color: #00C;
              background-image: url(_images/content_bgrnd.png);
              background-repeat: no-repeat;
              font-family: "Arial Black", Gadget, sans-serif;
              font-size: 20px;
              text-align: center;
              padding: 8px;
    Here is the code for the site......
    <!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>Kiahuna 104</title>
    <script type="text/javascript">
    <!--
    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_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_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>
    <link href="104.css" rel="stylesheet" type="text/css" />
    </head>
    <body onload="MM_preloadImages('_images/buttinside1.jpg','_images/buttproperty1.jpg','_images/b uttactivities1.jpg','_images/buttdining1.jpg','_images/buttcontacts1.jpg','_images/home_lg 1.png','_images/home_lg2.png','_images/home_lg3.png','_images/home_lg4.png','_images/home_ lg5.png','_images/home_lg6.png','_images/home_lg7.png','_images/home_lg8.png')">
    <div id="wrapper">
    <!--Header-->
    <table id="header">
      <div class="header"><img src="_images/newLOGO.jpg" alt="Kiahuna 104" width="1000"/>
    </div>
    <!--Navigation table-->
    <table width="1000" bgcolor="000">
      <tr>
        <td width="40"> </td>
        <td width="150"><a href="inside.htm"><img src="_images/butthome1.jpg" alt="home1" name="home1"  id="home1" /></a></td>
        <td width="150"><img src="_images/buttinside2.jpg" alt="inside2" name="inside2" id="inside2" onmouseover="MM_swapImage('inside2','','_images/buttinside1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
        <td width="150"><a href="property.htm"><img src="_images/buttproperty2.jpg" alt="property2" name="property2" id="property2" onmouseover="MM_swapImage('property2','','_images/buttproperty1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
        <td width="150"><a href="activities.htm"><img src="_images/buttactivities2.jpg" alt="activities2" name="act2" id="act2" onmouseover="MM_swapImage('act2','','_images/buttactivities1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
        <td width="150"><a href="dining.htm"><img src="_images/buttdining2.jpg" alt="dining2" name="dining2" id="dining2" onmouseover="MM_swapImage('dining2','','_images/buttdining1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
        <td width="150"><a href="contact.htm"><img src="_images/buttcontacts2.jpg" alt="contact2" name="contact2" id="contact2" onmouseover="MM_swapImage('contact2','','_images/buttcontacts1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
      </tr>
    </table>
    <!--Start of content1 table- height = 371-->
    <table id="content1" table width="1000" height="371">
      <tr>
        <td width="34"> </td>
        <td width="897"><p>blah blah blah.</p>
          <p class="center2">NEW: IN-CONDO WASHER & DRYER - COMPLETELY NEW FURNITURE</p></td>
        <td width="53"> </td>
      </tr>
    </table>
    </body>
    </html>

    I tried to assign a width in both the page and CSS and it still doesn't center.  Here is a link to the site and the CSS....
    http://taffyproductions.com/test/
    @charset "UTF-8";
    /* CSS Document */
    div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
              margin: 0px;
              padding: 0px;
    #wrapper{
              margin: 0, auto;
              background-color: #000;
    ul {
              list-style: none;
    table#content1{
              background-color: #00C;
              background-image: url(_images/content_bgrnd.png);
              background-repeat: no-repeat;
    font-size: 16px;
              font-family: Papyrus, Arial, "Helvetica Bold", serif;
              font-size: 22px;
              text-align: center;
              padding: 8px;
    table#imagegallery{
              background-image: url(_images/imageGallery_bckgrnd.png);
              background-repeat: no-repeat;
    #imagegallery a img{
        padding: 0px;
        margin: 2px;
        border: 2px solid #000;
    #imagegallery a:hover img {
              border: 2px solid #C00;
    table#footer{
              background-image: url(_images/footer_bckgrnd.png);
              background-repeat: no-repeat;

  • Problem with Flash in a Hide/Show Div Tag

    What is the best way to handle Flash files on an HTML page
    within a <div> tag you hide and show (via javascript). It
    seems to reload when you hide and then show the <div> tag
    when using display: block.
    Positioning instead (move offscreen)?
    Visibility?
    Other?

    I would say off-screen is going to give you the best
    cross-platform performance. I've found visibility show/hide
    prevents the swf from working in IE while hidden much like you
    alluded to. Of course in mozilla browsers hide doesn't behave the
    same way.

  • Div tags in design view

    How is it that I can no longer control the position and size of a Div in design view? There appears to be no way to resize or move the div tag.I am using CS5

    Do you mean Divs or AP Divs?

  • Dreamweaver crashes when i drag my div tags in design view

    Hi
    Ive just encountered a problem with dreamweaver cs4 at work.
    I was creating a website using CSS and creating multiple div tags to house my images around the page. I normally position them using the CSS style sheet, but on this occasion, I grabbed the div tag whilst in design view and dragged it manually, and dreamweaver crashed! See image below It does so everytime I try the same thing again. Ive even restarted my PC. Anyone know why?

    I've not see this before, so can't say why it would be happening.  Would the pc be low on resources?  but then again you say it happened even after a restart of the pc.
    Maybe you could try the file cache and the personal configuration folder fix to see if it fixes any issues.
    http://forums.adobe.com/thread/417116#cache
    PS:  While I'm at it, it would be wrong for me to point out that using AP divs is not the optimum way to create a layout....  unless you know the repercussions of using them.
    Here's why:  (from the Dreamweaver FAQ)
    http://forums.adobe.com/thread/477969

  • Can you change the default code that targets a new window to change the content in a div tag instead

    I created a database for store locations.  I was able to display the list of stores.  Here though I don't want the list to show the number in front of it...  I still need to find the CSS to edit my results for this one.  However, more importantly, I don't want to open my results in a new window, I want to be able to target a DIV tag instead.
    This is the code that is created to display the list of stores.
    {module_webapps,5665,a,,,_blank,,50,,1}
    Currently it opens a blank window.  I'd like to target a div tag on the right of the list area where the store info can appear.
    Perhaps the gurus at adobe can upgrade this feature?  Target DIVs instead of new or blank windows, or using frames. Below is the screen of the links created from the DB.
    Below is the blank window that it opens.
    Would like to make it open in a div to the right of the list.  Not sure how to change to core code that was created to make that change.

    I'm doing something wrong.  I have the list showing the stores in CA
    <div class="flip" id="woodcontainer" style="width: 160px; height: 23px;">
    <h1>CALIFORNIA</h1>
    </div>
    <div class="panel">
    <script>
      $("#infochange").load("{module_webapps,5665,c,41140}"); /* this creates the list of stores in CA where #infochange is the DIV I am targeting.
    </script>
    </div>
    <br />
    The code for the DIV where I want the details to load.
    <div id="infochange"></div>
    This doesn't make sense because I need to have something in the DIV as a holder of some sort? 

  • How to Include More Than One Font and Font Color Within a Fluid Grid Div Tag?

    Using CSS code, I can make all the words within a fluid grid div tag the same font, font size, and font color, but how do I make a few of the words different?

    You can style the basic text and heading selectors with CSS:
    p { }
    h1 { }
    h2 { }
    h3 { }
    h4 { }
    etc...
    And you can make classes:
    .red {color:red}
    .highlight {background-color:yellow}
    Then apply classes to your text or sections of it using the HTML properties panel.
    <div>
         <p>This is a default paragraph style.</p>
         <p class="red">This is red.</p>
         <p class="highlight">This is highlighted.</p>
         <p>Default style with <span class="red highlight">red, highlighted text</span> and normal text.</p>
    </div>
    Incidentally, this will work in any layout.
    How to Develop with CSS?
    http://phrogz.net/css/HowToDevelopWithCSS.html
    Nancy O.

  • Dreamweaver cs5.5 - div tags won't float next to eachother

    I have being trying to get 2 div tags to float next to eachother for hours! I've been messing with the float and messing with margins, but what ever i do the div is always somewhat under my other div tag. I want them completely side by side. I have tried changing the top and bottom margins but that doesn't work either. how can i get them side by side? One is called 'textbox' and the other 'imagewrapper'. The code is:
    <!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>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="main.css" rel="stylesheet" type="text/css" />
    <link href="style2.css" rel="stylesheet" type="text/css" />
    <!--embedded styles for this page only-->
    <style type="text/css">
    body {
    margin:0;
    padding:0;
    font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";
    #wrapper {
    width: 1064px;
    margin: 0 auto; /**with width, this centers page on screen**/
    background: #FFF;
    text-align:center;
    /**this styles image container**/
    #thumbs p {
              float:center;
              width: 50px;
              height: 75px;
              /**this styles caption text**/
    font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
              color: #666;
              text-align:center;
              border: 1px solid silver;
              margin-top: 10px;
              margin-right: 5px;
              margin-bottom: 18px;
              margin-left: 5px;
    /**recommend using same size images**/
    #thumbs img {
              width:  50px; /**adjust width to photo**/
              height: 75px; /**adjust height to photo**/
              /**CSS3 drop shadows**/
    -moz-box-shadow: 5px 5px 5px #666;
              -webkit-box-shadow: 5px 5px 5px #666;
              -khtml-box-shadow: 5px 5px 5px #666;
              box-shadow: 5px 5px 5px #666;
    /**float clearing**/
    #thumbs:after{
              display:block;
              visibility:hidden;
              height:0;
              font-size:0;
              content: " ";
              clear: left;
    #wrapper #thumbs #imagewrapper {
              height: 362px;
              width: 280px;
              float: right;
              margin-right: 720px;
    #wrapper #thumbs #imagewrapper img {
              height: 362px;
              width: 280px;
    #wrapper #textbox {
              float: right;
              height: 300px;
              width: 600px;
              margin-right: 70px;
    .clearing {
    clear:left;
    height:px;
    width: 100%;
    </style>
    </head>
    <body>
    <div id="wrapper">
    <img src="product and website photos/header.png" width="1064" height="116" alt="header" />
    <!--begin menu -->
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#home.html">Home</a></li>
    <li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>
    <li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>
    <li><a href="bwt.html">Tops</a></li>
    <li><a href="bws.html">Skirts/Shorts</a></li>
    <li><a href="bwl.html">Trousers/Leggings</a></li>
    <li><a href="bwa.html">Accessories</a></li>
    <li><a href="bwd.html">Dresses</a></li></ul></li>
    <li><a href="#" class="MenuBarItemSubmenu">Men</a>
    <ul>
    <li><a href="#">Tops</a></li>
    <li><a href="#">Bottoms</a></li>
    <li><a href="#">Accessories</a></li>
    </ul>
    </li>
    <li><a href="#">Semi-Unique</a></li>
    </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a><ul>
    <li><a href="t-shirt shop.html">Men</a></li>
    <li><a href="t-shirt shop.html">Women</a></li>
    <li><a href="t-shirt shop.html">Unique</a></li>
    </ul></li>
    <li><a href="clearance.html">Clearance</a></li>
    <li><a href="#">About</a></li>
    </ul>
    <h2> </h2>
    <div id="textbox"></div>
    <div id="thumbs">
      <div id="imagewrapper"></div>
      <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <!--end wrapper --></div>
    <hr align="center" size="10" noshade="noshade" class="clearing" color="#999999" />
    <div align="left">&copy; 2012 your footer text goes here</div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

    If you want to position 2 divs - one on left and other on right, the float for your left div should say float: left; and for the one on the right the CSS should say float:right;
    In your code, I see you want imagewrapper to come on right and textbox to come on left. But your float for BOTH these say right. This is where the issue lies.
    You can combine float:left and float:right to achieve side by side divs provided the overall width (container width+padding+margin) of both divs is less than or equal to the width of the wrapper div.
    In the OP's example:
    #wrapper = 1064+0+0 = 1064px
    #textbox + #imagewrapper = 600+70+280+720 = 1670px = float drop

  • Floating div tags - won't align

    Hi there,
    I am trying to align 2 div tags next to one another in the latest version of dreamweaver cc. At the moment I have one floating to the left 60% wide and on the the right 40% wide. The second div tag sits on the next line down to the right but I can't seem to get them the sit directly next to one another. Please help Thank you

    Copy & paste this code into a new, blank document.  SaveAs test.html and preview in browsers.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Document</title>
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style>
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    body {
        padding: 0;
        width: 90%; /**adjust width as required**/
        margin: 0 auto; /**this is centered**/
        background: #F5DD83;
        color: #2294AE;
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
        font-size: 100%;
        box-shadow: 2px 2px 4px #333;
    header {
        margin: 0;
        padding: 0 1%;
        width: 100%;
        background: #B00202;
        color: #FFF;
    header h1, header h2 {
        display: inline;
        color: #F5DD83;
        padding: 0 3%;
    section {
        margin: 0;
        padding: 0;
        background: #FFF;
        overflow: hidden; /**float containment**/
    article {
        margin: 0;
        padding: 0 2%;
        float: left;
    article.left { width: 60%; }
    article.right {
        border-left: 1px solid #366;
        width: 40%;
    footer {
        background: #B00202;
        clear: left;
        display: block;
        padding: 2%;
        color: #FFF;
    </style>
    </head>
    <body>
    <!--begin header-->
    <header>
    <h1>Sitename</h1>
    <h2>Some pithy slogan...</h2>
    <nav>Horizontal menu  goes here...</nav>
    </header>
    <!--begin main content-->
    <section>
    <article class="left"> <h3>Article Left 60% wide</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
    Maecenas quis velit nisl, volutpat viverra felis.  Vestibulum luctus mauris sed sem dapibus luctus. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
    Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
    <!--end left article-->
    </article>
    <!--begin right article-->
    <article class="right"> <h3>Article Right 40% wide</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
    Maecenas quis velit nisl, volutpat viverra felis.  Vestibulum luctus mauris sed sem dapibus luctus. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
    Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
    </article>
    <!--begin footer-->
    <footer> <small>© 2014 Your Site Name. All rights reserved</small> </footer>
    </section>
    </body>
    </html>
    Nancy O.

  • Quick question about div tags

    How do you make a div tag only as wide as the content that is
    inside of it, rather than the width of the cell that surrounds
    it?

    <div style="width:200px; float:left">
    Would give you a div 200px wide and floated to the left. You
    can similarly
    float another div to the right of this div etc. When you are
    done with a row
    of divs, you would want to clear the float so that the next
    set of divs
    starts with the extreme left as the reference point. To clear
    a float you
    would use style="clear:both;" or style="clear:left;" etc.
    Please do some
    reading on all this before you start experimenting else
    you'll run into a
    multitude of issues.
    You cannot lose until you give up !!!
    "AngryCloud" <[email protected]> wrote in
    message
    news:f133f2$jk4$[email protected]..
    > How do you make a div tag only as wide as the content
    that is inside of
    > it, rather than the width of the cell that surrounds it?

Maybe you are looking for