10 Replies Latest reply: Feb 3, 2013 4:47 PM by Nancy O. RSS

    Images expands outside of containing div. Fluidgrid, divs, images, dreamweaver

    New flash user Community Member

      Well I have been using Dreamweavers new fluid grid system to rebuild my old fixed layout site.

      It has been a major learning experence for me.  I have spent 5 weeks now and I really like it.

       

      I hit a snag now.  Twice.  The first time I was able to just mask the problem.  This time I cant get past it.   I have spent 6 hours on this and now I am cring for help.

       

      I am working with images.  I basically designed my site to display pictures in rows.  I first use photoshop to webformat my pictures to the same size  300px by 160 pxs.

       

      After spending hours cropping and sizing photos to the same sizes.  I start inserting them into my divs  which were made with the "insert fluid grid layout div tag" button.   these divs are created on the same row  three across the page.

       

      In design view, My goal is to place one picture in each div so that I have 3 photos span across the page,no text.

       

      I insert the first photo into the first div container.  For some reason the picture extends slightly to the right, outside the containing div box.  Almost like the picture is bigger than the div container.  Then I insert the secound picture in the next div, it extends outside its div twice as much at the first picture in the first div. When I insert the third picture it also extends to the right of its div container.  Looks to be 3 times as much as the first div.

       

      This causes the third div container to drop back down to the next row.  Leaving a big space to the right of the second div container.  I look at it in live view and the pictures all look the same size but the last one is still on the next row.  Looking at the page it seems they would all fit on the same row but they dont.

       

      Is this a margin error, is my intial photo 25 pix to big for the div to contain it?  The images dont have W or H values so why arent they staying contained in the divs?

       

      Note:

       

      The box I am talking about is the box you can drag around with handles to snap it to the grid.  The layout box.

       

      My boxes will fix ok on desktop view it is in the tablet view that it is dropped it down.  9 rows.  3 divs 3 colums wide each.  That right hang over is causing the 3 div box to not fit.  Whats up with this