4 Replies Latest reply: Mar 2, 2013 4:44 PM by Nancy O. RSS

    Layers and Fluid Grid part 2




      I recently had a post in here about Layers and Fluid Grid,


      I had said i was happy with the answer but turned out i am not able to have it work like it should.

      So instead of continuing that post i made another one to further the conversation. A link to that first post here:




      I did what Nancy O suggested and placed her code in a style sheet and also the html:


      #holder  {


      top: xxxpx;

      left: xxxpx;




      #button   {


      top: xxx px;

      left: xxxpx;

      z-index: 10;






      <div id="holder">

      <div id="#button">your button here</div></div>


      Thank you Nancy for that.  I entered my values and must have done something to effect it how it connects to the parent.

      Something i am missing? The app div is absolute and the parent is relative


      Even with a fixed page of html5 with no fluid grid i tried to make an app div stay put in many browsers only to have it move around.  I used an swf file video as the file size is much smaller for the web. I just want to put a simple rollover button over a flash video inside an app div and have it work or stay put in all browsers.

      Thanks so much for the anticipated help .


      I could not get it to work as the  x- axis when page is grabbed and shrunk down the video moves but the app div rollover button stays fixed.  .

      The y- axis works fine.


      I had also found this video which explains another way to do it and same thing. I followed this video to a T and nothing.


      http://www.videorolls.com/watch/position-a-div-ap-div-exactly-where-you-want-it-in-adobe-d reamweaver

        • 1. Re: Layers and Fluid Grid part 2
          Nancy O. MVP

          Without seeing a link to your page, it's impossible to give you anything but generic answers to your question.


          <!doctype html>
          <meta charset="utf-8">
          #holder {
              width: 200px;
              height: 200px;
              margin: 45px auto;
              background: maroon;
          button {
              top: 50%;
              left: 50%;
              z-index: 100;
          <div id="holder">
          Flash object code goes inside this container
          <button id="button1">Button Text</button>



          Nancy O.

          • 2. Re: Layers and Fluid Grid part 2
            Livwell50 Community Member


            Thank you for the reply and your time.

            I think i see something i missed.

            The % for the button top and left

            Makes sense because the button has to flex with the page in percentage form.

            That may do it. 

            I will try and reply back results



            • 3. Re: Layers and Fluid Grid part 2
              Livwell50 Community Member



              I wanted to follow up.

              Everything worked well with the holders and placement over the video. I ran it through the W3C and it gave me errors for using the z index for each holder. It said to only use a z index for the parent and not the child.  I am also having overflow problems now and sort of at a standstill.


              I have everything including the video inside of this container


              <div class="c1">

              Then i have the swf file

              <object classid=xxx999xxxx width= "100"%  hieght="720"px id=" flashID">

              Then further down


              Then all of the holders with rollover buttons seven total

              closing with all inside of this "c1"

              </div class="c1">


              The rule for the "c1" :


              The postioning in css is 100% for width and position is relative



              The rule for the holders are:


              width and height : inherit

              my margins are from -840 bottom on up to -600

              more like this:



              #holder5 {

              postion: relative;

              width: inherit;

              height: inherit;

              top -840


              button6 {

              position: absolute;

              top:  680px;





              width and height inherit

              placement top -840


              I know one of these is wrong or all and I'm sure an easier method is around?

              Thanks so much if anyone can help


              • 4. Re: Layers and Fluid Grid part 2
                Nancy O. MVP

                A URL is the best way to get help with layout issues. 




                Nancy O.