Skip navigation
New flash user
Currently Being Moderated

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

Feb 3, 2013 8:49 AM

Tags: #image #dreamweaver #cs6 #containers #fluid_grid #fluid_grid_layout_div

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

 
Replies
  • Currently Being Moderated
    Feb 3, 2013 9:00 AM   in reply to New flash user

    Fluid grid uses % based layouts and a max-width: 100% on images.  For best results, remove explicit height & width values from img HTML and it should work as desired.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 10:19 AM   in reply to New flash user

    Show us a URL to your test page.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 2:07 PM   in reply to New flash user
    • I never touch anything in boilerplate.css or respond.js.  I don't recommend you do either.

     

    • I can't have a meaningful discussion about layouts without seeing your problem page in browsers.   A URL is worth a thousand words.

     

    • To save time, I uploaded a Fluid Grid test page for you to examine.   Images are doing exactly what I expect them to do.   I have not changed any of the Fluid Grid CSS code that DW generated.   My content styles are in a separate style sheet.  View source to see the code.
      http://alt-web.com/FluidGrid/Fluid.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 4:06 PM   in reply to New flash user

    CSS Box Model. 

    http://www.w3schools.com/css/css_boxmodel.asp

     

    Borders add to the width of divs.  If you use borders, reduce div widths to accommodate them.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 4:47 PM   in reply to New flash user

    #LayoutDiv1 {

    clear: both;

    float: left;

    margin-left: 0;

    margin-top: 0;

    width:100%;

    width: 98%;

    border:1px solid #000;

    display: block;

    }

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points