Positioning a responsive composition in a containing DIV

OK, I may be having a fruit loop moment but I've spent 2 days trying to correctly position and size a responsive composition in a basic div.
I have some old compositions that I am trying to update from 2013 but when the responsive scaling is selected (either horizontal, vertical, or both) they then leap out of all the containing div's on my page and scale to the viewport.
My page layout is %age based and the composition should scale inside the containing div depending on the viewport size and any resize. It all worked perfectly before I updated but now whenever I set a composition to 'Responsive Scaling' it wants to scale to the page.
Am I missing something really obvious?

Augment the options in the script tag of the html page like below:
        AdobeEdge.loadComposition('Untitled-1', 'EDGE-565958637', {
              scaleToFit: "width",
              centerStage: "horizontal",
              minW: "0",
              maxW: "undefined",
              width: "550px",
              height: "400px",
              bScaleToParent: true
      }, {dom: [ ]}, {dom: [ ]});
hth,
Vivekuma

Similar Messages

Issue with container divs, and absolute/fixed positioning

Hello everyone, I have an issue getting my divs to function properly. I have a container div and I want the table div to float inside (and move with page resize). Right now it doesnt move with the page (see photo).
However, when I change the position to relative of that div, it moves under the container div and locks itself there.(Second photo)
Any help would be great! Thanks!
Picture one:
Picture two
<!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>davide marchetti architetto</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<link href="ttp://mottie.github.com/tablesorter/css/theme.blue.css" rel="stylesheet">
<script type="text/javascript" src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript">
$(document).ready(function()
        $("#myTable").tablesorter();
</script>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
margin: 0;
padding: 0;
color: #000;
background-image: url();
background-repeat: no-repeat;
/* ~~ 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;
h1, h2, h3, h4, h5, h6, p {
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: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
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:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #4E5869;
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;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div 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.
.content {
padding: 10px 0;
font-size: x-small;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ 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: right;
margin-left: 8px;
.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 overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
body,td,th {
          font-family: "Courier New", Courier, monospace;
          font-size: 12px;
#apDiv1 {
position: relative;
width: 618px;
height: 268px;
z-index: 1;
left: 186px;
top: 147px;
overflow: hidden;
#apDiv2 {
          position: relative;
          width: 698px;
          height: 299px;
          z-index: 1;
          left: 266px;
          top: 117px;
          overflow: scroll;
table.tableizer-table {
border: 1px solid #CCC; font-family: Courier New, Courier, monospace;
font-size: 12px;
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
.tableizer-table th {
background-color: #000000;
color: #FFF;
font-weight: bold;
#apDiv4 {
position: relative;
width: 697px;
height: 299px;
z-index: 1;
left: -141px;
top: -636px;
overflow: scroll;
#apDiv3 {
position: relative;
width: 700px;
height: 300px;
z-index: 2;
h1,h2,h3,h4,h5,h6 {
font-family: "Courier New", Courier, monospace;
</style>


</head>
<div class="container">
<div class="container"><img src="../images/Davide.png" width="800" height="600" usemap="#Map" border="0" />
    <div id="apDiv2">
      <map name="Map" id="Map">
        <area shape="rect" coords="48,416,125,435" href="../news.html" />
        <area shape="rect" coords="262,416,304,436" href="../studio.html" />
        <area shape="rect" coords="490,416,545,435" href="../projects.html" />
        <area shape="rect" coords="702,415,751,436" href="../contact.html" />
      </map>
      <table id="myTable" class="tableizer-table">
        <thead>
          <tr class="tableizer-firstrow">
            <th>YEAR </th>
            <th>PROJECT</th>
            <th>LOCATION</th>
            <th>CATEGORY</th>
            <th>STATUS</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2013</td>
            <td>EXPO 2015 - Italian Pavilion</td>
            <td>Milan - Italy</td>
            <td>Culture</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td>2012</td>
            <td>Requalification of "Almerici", "Bufalini" and "Fabbri" Squares</td>
            <td>Cesena - Italy</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Re-thinking Shanghai: sustainable intervention along the Suzhou Creek</td>
            <td>Shanghai - China</td>
            <td>Mixed use</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>VCC Flat</td>
            <td>Rome - Italy</td>
            <td>Interior design</td>
            <td>Commission / Built</td>
          </tr>
          <tr>
            <td>2011</td>
            <td>London 2012 Olympic Games Information Pavilion</td>
            <td>London - UK</td>
            <td>Culture</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Enhancement project for the sacred area of the sanctuary of Hercules Victor</td>
            <td>Tivoli - Italy</td>
            <td>Culture</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td>2010</td>
            <td>VTL Flat </td>
            <td>Rome - Italy</td>
            <td>Interior design</td>
            <td>Commission / Built</td>
          </tr>
          <tr>
            <td> </td>
            <td>BNC Flat</td>
            <td>Rome - Italy</td>
            <td>Interior design</td>
            <td>Commission / Built</td>
          </tr>
          <tr>
            <td> </td>
            <td>Expansion of the "Farnesina" High School</td>
            <td>Rome - Italy</td>
            <td>Education</td>
            <td>Competition / Selected Project</td>
          </tr>
          <tr>
            <td> </td>
            <td>Neanderthal Art Center</td>
            <td>Pilo�a - Spain</td>
            <td>Culture</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>New pedestrian & cycling footpath in the site of the "San Leopoldo II" old bridge</td>
            <td>Poggio a Caiano - Italy</td>
            <td>Infrastructure</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Proposition 2065 - St. Leonards site</td>
            <td>Sidney - Australia</td>
            <td>Mixed use</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>MEIS - National Museum of Italian Judaism and Shoah </td>
            <td>Ferrara - Italy</td>
            <td>Culture</td>
            <td>Competition / 3rd Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>36 The Calls Design Competition</td>
            <td>Leeds - UK</td>
            <td>Offices</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Europan 10: masterplan for an harbour area</td>
            <td>Rudk�bing - Denmark</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td>2009</td>
            <td>"Scuola in Piazza a Levante" - Kindergarten and public areas</td>
            <td>Bisceglie - Italy</td>
            <td>Education</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>CIBAF - City of Kids </td>
            <td>Frattamaggiore - Italy</td>
            <td>Education</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Designing in Teheran</td>
            <td>Teheran - Iran</td>
            <td>Mixed use</td>
            <td>Competition / Selected Project</td>
          </tr>
          <tr>
            <td>2008</td>
            <td>DawnTown 2008: Waterworks</td>
            <td>Miami - USA</td>
            <td>Mixed use</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Venice Biennale New Australian Pavillion</td>
            <td>Venice - Italy</td>
            <td>Culture</td>
            <td>Competition / 1st Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>New pedestrian and cycling bridge</td>
            <td>Civita di Bagnoregio - Italy</td>
            <td>Infrastructure</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Renovation of "San Ciro" Square</td>
            <td>Portici - Italy</td>
            <td>Urban planning</td>
            <td>Competition / 2nd phase selected / 3rd Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>Renovation of "Umberto I�" Square</td>
            <td>San Ferdinando di Puglia - Italy</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Historic Renovation of the "Corsie Sistine" Hospital Wards </td>
            <td>Rome - Italy</td>
            <td>Culture</td>
            <td>Tender Competition (design/bid/build)</td>
          </tr>
          <tr>
            <td> </td>
            <td>Cupboard</td>
            <td>Rome - Italy</td>
            <td>Furniture design</td>
            <td>Commission / Built</td>
          </tr>
          <tr>
            <td> </td>
            <td>Office table and lighting system</td>
            <td>Rome - Italy</td>
            <td>Furniture design</td>
            <td>Commission / Built</td>
          </tr>
          <tr>
            <td> </td>
            <td>New City Library</td>
            <td>Legnano - Italy</td>
            <td>Library</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Office table</td>
            <td>Rome - Italy</td>
            <td>Furniture design</td>
            <td>Concept Design</td>
          </tr>
          <tr>
            <td> </td>
            <td>Volleyball Arena, Hotel and Commercial Spaces</td>
            <td>Rome - Italy</td>
            <td>Mixed use</td>
            <td>Concept Design</td>
          </tr>
          <tr>
            <td>2007</td>
            <td>New Provincial Archaeological Museum in the Santa Scolastica Monastery</td>
            <td>Bari - Italy</td>
            <td>Culture</td>
            <td>Competition / 5th Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>The City of Water and Health</td>
            <td>Rome - Italy</td>
            <td>Mixed use</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Parkway Iconic Bridge</td>
            <td>Sheffield - UK</td>
            <td>Infrastructure</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Renovation of "Loveno 84" Sport Center</td>
            <td>Menaggio - Italy</td>
            <td>Sport</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>"Guardia di Finanza" Corp Main Headquarters</td>
            <td>Catanzaro - Italy</td>
            <td>Mixed use</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>"Lega Lombarda" Real Estate Complex Urban Development</td>
            <td>Rome - Italy</td>
            <td>Mixed use</td>
            <td>Tender Competition (design/bid/build) </td>
          </tr>
          <tr>
            <td> </td>
            <td>Necklace</td>
            <td>Rome - Italy</td>
            <td>Jewellery design</td>
            <td>Prototype </td>
          </tr>
          <tr>
            <td> </td>
            <td>Moon putter</td>
            <td>Rome - Italy</td>
            <td>Product design</td>
            <td>Prototype</td>
          </tr>
          <tr>
            <td> </td>
            <td>Aleale Coffee Table</td>
            <td>Rome - Italy</td>
            <td>Furniture design</td>
            <td>Concept Design</td>
          </tr>
          <tr>
            <td>2006</td>
            <td>"1st October" Public Square</td>
            <td>Santa Maria Capua Vetere - Italy</td>
            <td>Urban planning</td>
            <td>Competition / 1st Prize / Built</td>
          </tr>
          <tr>
            <td> </td>
            <td>"Attilio Pecile" New Square and Sustainable Mixed Use Building</td>
            <td>Rome - Italy</td>
            <td>Mixed use</td>
            <td>Competition / 1st Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>Renewal of the "Porta Nuova" Old Tower</td>
            <td>Venice - Italy</td>
            <td>Culture</td>
            <td>Competition / 2nd Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>"Meno e pi� 4": Civic Center and Pre-school Building</td>
            <td>Rome - Italy</td>
            <td>Mixed use</td>
            <td>Competition / Mention</td>
          </tr>
          <tr>
            <td> </td>
            <td>Urban Renewal of Historic Building and Public Squares</td>
            <td>Conversano - Italy</td>
            <td>Urban planning</td>
            <td>Competition / 2nd Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>New Seafront and Beach Accesses</td>
            <td>Fregene - Italy</td>
            <td>Urban planning</td>
            <td>Competition / Mention</td>
          </tr>
          <tr>
            <td> </td>
            <td>Requalification of Main Streets and Squares of the Old City Centre</td>
            <td>Bari - Italy</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Gyeonggi-do Jeongok Prehistory Museum</td>
            <td>Jeongok-ri - South Korea</td>
            <td>Culture</td>
            <td>Competition / Honourable Mention</td>
          </tr>
          <tr>
            <td> </td>
            <td>Low-income housing development</td>
            <td>Guadalajara/Ceuta - Spain</td>
            <td>Residential</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Shop extension</td>
            <td>Rome - Italy</td>
            <td>Retail</td>
            <td>Commission / Concept Design</td>
          </tr>
          <tr>
            <td> </td>
            <td>Temporary Concert Hall</td>
            <td>Rome - Italy</td>
            <td>Culture</td>
            <td>Concept Design</td>
          </tr>
          <tr>
            <td> </td>
            <td>Office Space Interior Design - New Seat of the Lombardy Regional Government </td>
            <td>Milan - Italy</td>
            <td>Office</td>
            <td>Tender Competition (design/bid/build)</td>
          </tr>
          <tr>
            <td>2005</td>
            <td>Europan 8 - Urban Requalification</td>
            <td>Istanbul - Turkey</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Natural Park Visitor Center, Kindergarten and Primary School</td>
            <td>Funes - Italy</td>
            <td>Education</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Coastal Area Development</td>
            <td>Latina - Italy</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Requalification of Three Squares</td>
            <td>Benevento - Italy</td>
            <td>Urban planning</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Office and Data Center New Building in the Ministry of Defense headquarters</td>
            <td>Rome - Italy</td>
            <td>Office</td>
            <td>Concept Design</td>
          </tr>
          <tr>
            <td>2004</td>
            <td>JCD Floating Pearl Store</td>
            <td>Tokio - Japan</td>
            <td>Retail</td>
            <td>Competition / 2nd phase selected </td>
          </tr>
          <tr>
            <td> </td>
            <td>Requalifications of Rome�s Beachfront and Coastal Areas</td>
            <td>Ostia - Italy</td>
            <td>Urban planning</td>
            <td>Competition / 1st Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>40 Apartments Building and Sport Center</td>
            <td>Rome - Italy</td>
            <td>Mixed use</td>
            <td>Competition / 2nd Prize</td>
          </tr>
          <tr>
            <td> </td>
            <td>nMBA New Beaux-Art Museum</td>
            <td>Lausanne - Switzerland</td>
            <td>Culture</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>The Dubai Residence and Hotel Towers</td>
            <td>Dubai - UAE</td>
            <td>Mixed use</td>
            <td>Concept Design</td>
          </tr>
          <tr>
            <td> </td>
            <td>Shoes and Accessories Shop</td>
            <td>Rome - Italy</td>
            <td>Retail</td>
            <td>Commission / Concept Design</td>
          </tr>
          <tr>
            <td>2003</td>
            <td>Pedestrian and cycling Bridge </td>
            <td>Rome - Italy</td>
            <td>Infrastructure</td>
            <td>Competition</td>
          </tr>
          <tr>
            <td> </td>
            <td>Temporary Pavillion for a Car Show</td>
            <td>Rome - Italy</td>
            <td>Retail</td>
            <td>Commission / Concept Design</td>
          </tr>
          <tr>
            <td> </td>
            <td>Belvedere Tower</td>
            <td>Castellammare di Stabia - Italy</td>
            <td>Infrastructure</td>
            <td>Concept Design</td>
          </tr>
        </tbody>
      </table>
    </div>
</div>
</div>
</body>
</html>

#apDiv2 {
    position: absolute;
    width: 698px;
    height: 299px;
    z-index: 1;
    left:50px;
    top: 117px;
    overflow: scroll;
Don't forget to fix your code errors. You're still missing a <body> tag in your markup.
Nancy O.

How can i centre two side by side divs vertically so they both are in the centre of there parent /containing div?

How can i centre two side by side divs vertically so they both are in the centre of there parent /containing div? One of the divs is larger than the other so i would want the smaller one to centre inside a parent div like so:
Grey= parent/container (Width of both orange and red div)
Orange= Div 1
Red= Smaller div- centralised (hopefully)

If you wanted to go completely "Not for IE8 or lower" and use some of the often overlooked viewport units, it could be very responsive to browser resizing...
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> VW, it's not just a car for Mac users...</title>
<style>
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
#gray {
    background-color:gray;
    width:80vw;
    margin:0 auto;
    height:40vw;
    font-size:2vw;
#red {
    width:50%;
    height:50%;
    background-color:red;
    margin-top:12.5%;
    float:left;
#orange {
    background-color:orange;
    width:50%;
    height:100%;
    float:left;
</style>

</head>
<body>
<div id="gray">
    <div id="orange"></div>
    <div id="red"></div>
</div>
</body>
</html>

How to center 6 divs in a container div - horizontally

I'm trying to build a Fluid Grid website with DW CC.
For now I have a problem which I can't solve.
I have six links in a nav bar. Every link has different block sizes, so I arranged that with CSS.
Now I like to have those divs, which are in a container div, horizontally centered in that container div.
The link-divs are now left aligned, the text in each div is centered.
I show you the HTML part of the links and the CSS for the navigation.

<div class="nav_container">
<div class="block1"><a href="index.html">Home</a></div>
<div class="block2"><a href="http://www.travelingphototeam.com">TravelingPhotoTeam</a></div>
<div class="block3"><a href="#">Over Ons</a></div>
<div class="block4"><a href="#">Bijbel Open</a></div>
<div class="block5"><a href="#">Nostalgie</a></div>
<div class="block6"><a href="#">Contact</a></div>
</div>
.nav_container {
          display: inline-block;
          position: relative;
          width: 100%;
          text-align: center;
.nav_container a:hover,a:active, a:focus, a.thispage    {
          color: #DCDCDC;
          text-decoration: none;
          text-align: center;
.block1 {
          width: 60px;
          float: left;
.block2 {
          width: 150px;
          float: left;
.block3 {
          width: 85px;
          float: left;
.block4 {
          width: 90px;
          float: left;
.block5 {
          width: 80px;
          float: left;
.block6 {
          width: 80px;
          float: left;

You would add up all of the block widths which comes to 545px then wrap the blocks in a blockWrapper <div> and set its width: 545px; and margin: 0 auto; which will center the blocks horizontally (see full code below)
On another note it doesn't seem like a very fluid design if you're using fixed width px.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
.nav_container {
display: inline-block;
position: relative;
width: 100%;
text-align: center;
.nav_container a:hover,a:active, a:focus, a.thispage    {
color: #DCDCDC;
text-decoration: none;
text-align: center;
.block1 {
width: 60px;
float: left;
.block2 {
width: 150px;
float: left;
.block3 {
width: 85px;
float: left;
.block4 {
width: 90px;
float: left;
.block5 {
width: 80px;
float: left;
.block6 {
width: 80px;
float: left;
.blockWrapper {
    width: 545px;
    margin: 0 auto;
</style>
</head>
<body>
<div class="nav_container">
<div class="blockWrapper">
<div class="block1"><a href="index.html">Home</a></div>
<div class="block2"><a href="http://www.travelingphototeam.com">TravelingPhotoTeam</a></div>
<div class="block3"><a href="#">Over Ons</a></div>
<div class="block4"><a href="#">Bijbel Open</a></div>
<div class="block5"><a href="#">Nostalgie</a></div>
<div class="block6"><a href="#">Contact</a></div>
</div>
</div>

</body>
</html>

Multiple responsive compositions on 1 page with edgecommons

Hi Guys,
I am trying to determine what in the is going on here, got two responsive compositions using edgecommons in a single html page. Below is the runtime code - however not having much luck getting them both displayed at the same time. I am able to see each composition on the page when I remove one of the two load functions, but if I use both, there is no joy. I must be doing something wrong but cannot determine what. P.S. all files and assets loaded in the root directory.
<script>
var custHtmlRoot="";
var script = document.createElement('script');
script.type= "text/javascript";
script.src = custHtmlRoot+"edge.5.0.0.min.js";
var head = document.getElementsByTagName('head')[0], done=false;
script.onload = script.onreadystatechange = function(){
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done=true;
//1st composition
(function() {
var custHtmlRoot="";
var opts ={
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "100%",
height: "100%"
opts.htmlRoot =custHtmlRoot;
AdobeEdge.loadComposition('clients', 'clients', opts,
{"dom":{}}, {"dom":{}});
//2nd composition
(function() {
var custHtmlRoot="";
var opts ={
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "100%",
height: "100%"
opts.htmlRoot =custHtmlRoot;
AdobeEdge.loadComposition('solutions', 'solutions', opts,
{"dom":{}}, {"dom":{}});
script.onload = script.onreadystatechange = null;
head.removeChild(script);
head.appendChild(script);
</script>
<style>
    .edgeLoad-clients { visibility:hidden; }
    .edgeLoad-solutions { visibility:hidden; }
</style>
<body style="margin:0;padding:0;height:100%;">
<div id="Stage1" class="clients"></div>
<div id="Stage2" class="solutions"></div>
    <meta content="minimum-scale=1, width=device-width, maximum-scale=1, user-scalable=yes" name="viewport">
</body>
Any help would be appreciated - Cheers
Wish the adobe team would streamline this in the next update. Makes real life instances very difficult to figure out.

vivekuma,
I believe I either found the problem or at least narrowed it down. 2014.1.1 appears to have broken the Multiple Responsive Animate Compositions in an uploaded state.
I will send you the comps that I have used for testing, but it appears that the current version (2014.1.1) broke this code in an "uploaded" state. Running this code on a local web server functions perfectly fine.
Again, this code only works locally and not on an internet web host!
P.S. I have removed all instances of Edge Commons, so there are no calls to this extension library.
P.S.S. I am now using multiple compositions to serve my responsive breakpoint needs using media queries to hide and zero out stages between break points.
Thanks Vivekuma and any other Adobe Edge Animate staff who read this!
Eldin

AP Div within a centralised container Div?

Is there a cunning way to use AP Divs within normal floating
or centralised
container Divs?
Cheers
ss.

Synapse Syndrome <[email protected]> wrote:
>
>>>>>> Is there a cunning way to use AP
Divs within normal floating or
>>>>>> centralised container Divs?
>>>>>>
>>>>>
>>>>> You can give the container
position:relative; so the AP Div
>>>>> takes it's position from that
container's top-left coordinate.
>>>>>
>>>>
>>>> Ah great. I'll look into that.
>>>>
>>>
>>> Hmmn, I can't get it to work.
>>>
>>> I give the #container position:relative;?
>>>
>>> The apDiv is still not moving with the
#container when the browser
>>> size is changed.
>>>
>>> What am I doing wrong?
>>>
>>
>> A wild guess as I don't know what your code looks
like: You don't have
>> the AP Div inside the container div code.
>>
>> This works:
>>
>>
>> #container {
>> position:relative;
>> background-color:#BBCCFF;
>> width: 300px;
>> float: right;
>> }
>> #apDiv1 {
>> position:absolute;
>> width:200px;
>> height:115px;
>> z-index:1;
>> left: 51px;
>> top: 54px;
>> background-color:#FFCC99;
>> }
>>
>>
>>
>>
>> <div id="container">
>> <p>Container Div</p>
>> <div id="apDiv1">AP Div</div>
>> <p>Container Div</p>
>> <p>Container Div</p>
>> <p>Container Div</p>
>> <p>Container Div</p>
>> <p>Container Div</p>
>> </div>
>>
>
> Ah, I can see where I was going wrong now. Thanks a lot
for your help.
I keep on doing this - forgettig to save the CSS file after
editing it
through the CSS box. Is there a keyboard shortcut for Save
All, or do I
have to use the menu all the time? (CS3).
ss.

How do I center a container div tag in Dreamweaver?

Hi,
I actually asked this question about another web page but for some reason setting the margins to "auto" on this one isn't working.
Please help. Thank you.
http://www.laurasummers.com/

Thanks Nancy. I appreciate this. I do have another question, though. I did try to adjust the margins in my Dreamweaver body style sheet and it didn't seem to work. Do you know why this is?
Also, I did add this code. It worked except that the "Laura Lee Summers" and the subtle wave imagery stay in place while everything else centers. The Laura Lee Summer and the wave image is in the container div tag so I am confused.
Try this:
body {
width: 960px;
position: relative;
margin: 0 auto; /**this centers the page on screen**/
background: #cdffff url(lsummers_images/laurasummers_bkgd_Final.jpg) top center no-repeat;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 14px;
color: #111;
line-height: 1.5;
NOTE #1: font-size in points (pt) is for print only. For web pages displayed on screens, use px, ems or %.
NOTE #2: The site owner's name is the most important piece of information on the page, right? It belongs inside the markup within <h1> tags. Instead, you have put her name in a background image which will never be recognized by Google.
SEO LINKS
Google's SEO Starter Guide Updated 2010
http://googlewebmastercentral.blogspot.com/2010/09/seo-starter-guide-updated.html
High Rankings Advisor
http://www.highrankings.com/newsletter/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Template- container div background not expanding with page

Hello! Still fairly new to Dreamweaver. I'm building a website using a template I made. Theres one problem I can't figure out... I've created my "container" div and I'm using a style to add a background to this div. I have all my other divs inside the container. The problem I'm running into is that with pages of different lengths, the background doesn't expand to fill the rest of the page. As my content div (editable region) expands with more content, and my footer div moves down as it should, the background image just cuts off where it ended in the template. I created the background in photoshop, and I know for a fact that it's long enough to handle the lengthy pages. It's not a matter of the background image not being long enough, its just as the content div expands bigger than the template, it doesn't fill the entire container div.
So far my only solution is to make sure the template is tall enough to handle the longest page, and the shorter pages just have the added space below the content. I dont really want to do this, but I will if I have to. I hope I was clear enough, if you need screenshots or need to see the code I can post it. Thanks in advance for your help!
Justin

Unfortunately I dont have a server yet, I realize that would be easiest and I apologize.
I tried adding the repeat-y like you said, and it didn't make any difference. I also went into the style and chose repeat-y from the dropdown box and it added
background-repeat: repeat-y;
and that didnt work either. I may not have explained it well enough, in my template.dwt page the background works exactly as it should, it expands with the page. But after I created the new pages using this template, then expanded the content in the editable region, thats when the container background doesn't expand to fill the page. It's stuck at the point I saved it in the template. I dont want the entire background showing all the time, on the shorter pages I want it to only go to the bottom of the content. Does that make sense?
Thank you

Border around container div

I have a veeerrrrrryyyy rough design going so please bear
with that... (i know it needs lots of graphic tweaking)
I am trying to put a thin dotted border #6600FF around the
container div and can't seem to make it work. Any ideas? (DW8)
http://www.nsbcustomjewelry.com/DIVTEST.shtml
Thanks!

#container {
border:2px dotted #60F;
}

Floating a footer DIV bottom center of screen inside a container Div??

Hi Im having terriblr trouble..........typical- i get the website done nice and fast and the last thing the annoying client wants I struggle!! I have a container div for the whole site keeping it centered. The client now wants the 'copyright' footer at the bottom of the screen......foalting of course......so its always centered and at the bottom of the screen whatever the size of your monitor.
Im struggling like hell...........I maybe not doing it right but when i get somwhere close it seems to be conflicting with the scrolling background pictures.
please have a look and advise if you know help.....thanks!! www.websitesmonthly.com/townhouse

I think you're making this overly complex. All you need is a simple 2-column layout.
http://alt-web.com/TEMPLATES/CSS-Basic-2-column-layout.shtml
Add whatever you wish to the #mainContent (left) div.
Nancy O.

Box model experts, why wouldnt this layout allow for a container div to fully expand?

Box model experts, why wouldnt this layout allow for a container div to fully expand?
Please see attached jpg.
Live site is at http://www.theminnternet.com/

You have an answer for the height issue, you may also be interested in this article that talks about cutting down on the stylesheet size... you have a lot of styles in your stylesheet that can really be trimmed down by using shorthand rules.
http://www.communitymx.com/content/article.cfm?cid=A43B828960590F55

Why is my container div expanding past the 1170px max width in preview mode?

Why is my container div div expanding past the 1170px max width in preview mode?
Thanks again,
Marc

#wrapper #leftside img {
float: left;
width: 399px;
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
==================
"Ruby7829" <[email protected]> wrote in
message
news:gdkr52$m6b$[email protected]..
> I'm trying to get the image on my homepage (which is 320
x 214) to sit
> inside
> my "leftside" div (which is 380 width). Why is it
expanding to 380 px if
> I put
> it in it's own div which is 320 px? What am I doing
wrong? Should I not
> have
> nested divs?
>
> Originally I sliced the leftside out of Fireworks but
I'm really trying to
> learn CSS and I want to do this the "right" way.
>
>
http://www.faceyourspaceorganizing.com/test_index.html
>
>

I put a Spry Tabbed Panel obj in my site at...how I centered it, to the container div width?

I put a Spry Tabbed Panel obj in my site at
http://l-web-dev.net/
how I centered it, to the container div width?

Add this to your document:
<style type="text/css">

</style>
Then change the following line
<div class="story" style="width:550px;">
to
<div class="story myTabbedPanels">
At a later stage you could add the style rules for myTabbedPanels to /styles/css-styles.css after having removed it from this document.
That is it.
Ben

Security based on the position and responsibility of Siebel tables.

Hi Forum,
We have a requirement to show some reports based on OLTP (Siebel Base tables with S_) tables. so we have created a repository and created few reports in OBIEE.
Now we want to implement security based on these tables. Like siebel users will be accessing these reports, So how do we implement security based on the position and responsibility of Siebel tables.
I request to share any links or docs pertaining to above mentioned implementation.
Thanks

Could be interference
AirPort and Bluetooth: Potential sources of wireless interference
Try:
- Reseting the BT headset
- Reset the iOS device. Nothing will be lost
Reset iOS device: Hold down the On/Off button and the Home button at the same time for at
least ten seconds, until the Apple logo appears.
- Reset network settings: Settings>General>Reset>Reset Network Settings. You will have to rejoin all wifi networs and re-pair all BT devices

CFMENU in IE6 shifts to the left and is wider than containing DIV

I have a horizontal CFMENU inside of a DIV, and in IE7/IE7/FF/Chrome, the menu is floated to the right, as specified in my CSS, but in IE6, the menu shifts to the left of the DIV that contains it, and it's width expands beyond the boundaries of the containing DIV. I've included all the applicable HTML and CSS below:
HTML:
    <body>
         <div align="center">
             <div id="bodyContainer">
                 <div class="contentContainer">
                     <div id="middlenav">
                         <div class="linksContainer">
                             <cfmenu name="ajaxMenu" type="horizontal">
                             </cfmenu>
                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </body>
CSS:
body, img, div, p, a, form, fieldset, ol, ul, label {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: black;
body {
    background-color: #E6E6E6;
    background-repeat: repeat-x;
    width: 100%;
div {
    overflow: hidden;
p, form, table, ol, ul {
    padding-top: 10px;
ol ul {
    padding-top: 5px;
    list-style-type: disc;
ol, ul {
    margin-left: 30px;
li {
    padding-bottom: 5px;
a {
    text-decoration: none;
a:hover {
    text-decoration: underline;
.linksContainer {
    float: right;
    padding-top: 5px;
    padding-bottom: 5px;
.linksContainer a {
    font-size: 13px;
.contentContainer {
    background-color: white;
    border-color: #00338D;
    border-style: solid;
    border-width: 2px;
    border-top: none;
    border-bottom: none;
#ajaxMenu {
    width: 960px;
#ajaxMenu,
#ajaxMenu div.bd,
#ajaxMenu ul,
#ajaxMenu li.yuimenubaritem {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: white;
#ajaxMenu a.yuimenubaritemlabel {
    border-color: black;
    border-width: 0px 0px 0px 2px;
#ajaxMenu li.first-of-type .yuimenubaritemlabel {
    border-left-width: 0px;
#ajaxMenu ul {
    height: auto;
    width: auto;
    border-style: none;
/* Hide down arrow on CF_generated AJAX menus */
#ajaxMenu .submenuindicator {
    visibility: hidden;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 0px;
#ajaxMenu li {
    height: auto;
    width: auto;
#ajaxMenu li.yuimenuitem {
    margin-bottom: -5px;
#ajaxMenu li.yuimenuitem a {
    padding: 5px 12px 5px 12px;
#ajaxMenu li a {
    font-size: 13px;
    padding: 1px 8px 1px 8px;
    text-decoration: none !important;

I have a horizontal CFMENU inside of a DIV, and in IE7/IE7/FF/Chrome, the menu is floated to the right, as specified in my CSS, but in IE6, the menu shifts to the left of the DIV that contains it, and it's width expands beyond the boundaries of the containing DIV. I've included all the applicable HTML and CSS below:
HTML:
    <body>
         <div align="center">
             <div id="bodyContainer">
                 <div class="contentContainer">
                     <div id="middlenav">
                         <div class="linksContainer">
                             <cfmenu name="ajaxMenu" type="horizontal">
                             </cfmenu>
                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </body>
CSS:
body, img, div, p, a, form, fieldset, ol, ul, label {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: black;
body {
    background-color: #E6E6E6;
    background-repeat: repeat-x;
    width: 100%;
div {
    overflow: hidden;
p, form, table, ol, ul {
    padding-top: 10px;
ol ul {
    padding-top: 5px;
    list-style-type: disc;
ol, ul {
    margin-left: 30px;
li {
    padding-bottom: 5px;
a {
    text-decoration: none;
a:hover {
    text-decoration: underline;
.linksContainer {
    float: right;
    padding-top: 5px;
    padding-bottom: 5px;
.linksContainer a {
    font-size: 13px;
.contentContainer {
    background-color: white;
    border-color: #00338D;
    border-style: solid;
    border-width: 2px;
    border-top: none;
    border-bottom: none;
#ajaxMenu {
    width: 960px;
#ajaxMenu,
#ajaxMenu div.bd,
#ajaxMenu ul,
#ajaxMenu li.yuimenubaritem {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: white;
#ajaxMenu a.yuimenubaritemlabel {
    border-color: black;
    border-width: 0px 0px 0px 2px;
#ajaxMenu li.first-of-type .yuimenubaritemlabel {
    border-left-width: 0px;
#ajaxMenu ul {
    height: auto;
    width: auto;
    border-style: none;
/* Hide down arrow on CF_generated AJAX menus */
#ajaxMenu .submenuindicator {
    visibility: hidden;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 0px;
#ajaxMenu li {
    height: auto;
    width: auto;
#ajaxMenu li.yuimenuitem {
    margin-bottom: -5px;
#ajaxMenu li.yuimenuitem a {
    padding: 5px 12px 5px 12px;
#ajaxMenu li a {
    font-size: 13px;
    padding: 1px 8px 1px 8px;
    text-decoration: none !important;

Positioning a responsive composition in a containing DIV

Similar Messages

Maybe you are looking for