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?
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
I dont have a test page yet. I notice that in the broilerplate.css that there is some code for
In one instance the photos cause the div to shift all the way to the right moving everthing else to the next row. If i disable the vertical-align it stops this behavior and shows the photo divs consistantly...
In all cases when I setup up a fluid grid layout page, It seems that I must make an extra row that is to the right side which nothing is snapped to. If nothing is snapped to the last column it works around a lot of problems I have had with items being to large for the other content areas, This last unused column gives space for the excess to move into instead of causing the next div to shift to the next row below.
Learning this is a major pain in the ***. Common sense says 9 columns / 3 = 3. SO you should get three equal content areas for three fluid grid divs of equal sizes ( to span 3 photos). But wait you need to create 10 columns with the 10 not being used so that information in the first 3 divs has an overflow area.
Even if I delete out the images and try to snap the divs to the grid i have a 9 column grid in tablet with 20% gutters. the third div gets confused and will not stay on the same row as the other 2 divs. 3 columns each. In on instance when I set up 12 divs this way all being photos. the 4th div jumped all the way to the right side of the fluid grid. MAKES NO SENSE. it is not aligned to the right side and I could only stop this by disabling the vertical-align.
THe more I have messed with this problem, It seems that the imgs first causes layoutproblem. But if I delete out all the images from the divs and try to reposition them. They last div does not want to move up to the row above. 3 columns open, div is set to three columns. But it wants to stay on the row below.