-
1. Re: Images expands outside of containing div. Fluidgrid, divs, images, dreamweaver
Nancy O. Feb 3, 2013 9:00 AM (in response 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.
-
2. Re: Images expands outside of containing div. Fluidgrid, divs, images, dreamweaver
New flash user Feb 3, 2013 9:23 AM (in response to Nancy O.)Nancy In my orginal post I stated the W and H have no value.
-
3. Re: Images expands outside of containing div. Fluidgrid, divs, images, dreamweaver
Nancy O. Feb 3, 2013 10:19 AM (in response to New flash user)Show us a URL to your test page.
Nancy O.
-
4. Re: Images expands outside of containing div. Fluidgrid, divs, images, dreamweaver
New flash user Feb 3, 2013 1:54 PM (in response to Nancy O.)I dont have a test page yet. I notice that in the broilerplate.css that there is some code for
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
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.
-
5. Re: Images expands outside of containing div. Fluidgrid, divs, images, dreamweaver
Nancy O. Feb 3, 2013 2:07 PM (in response 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.
-
6. Re: Images expands outside of containing div. Fluidgrid, divs, images, dreamweaver
New flash user Feb 3, 2013 3:47 PM (in response to Nancy O.)OK. I have identified the property that is causing the div to drop down to the next line border: thin solid #000.
Why is the border property causing the div to fall to the next line?
-
7. Re: Images expands outside of containing div. Fluidgrid, divs, images, dreamweaver
New flash user Feb 3, 2013 3:48 PM (in response to New flash user)The border property is causing a problem when it is on a div that is filled with an image.
-
8. Re: Images expands outside of containing div. Fluidgrid, divs, images, dreamweaver
Nancy O. Feb 3, 2013 4:06 PM (in response 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.
-
9. Re: Images expands outside of containing div. Fluidgrid, divs, images, dreamweaver
New flash user Feb 3, 2013 4:11 PM (in response to Nancy O.)If you dont set the width of the img in the div, how do you reduce the div widths to accommodate a border?
-
10. Re: Images expands outside of containing div. Fluidgrid, divs, images, dreamweaver
Nancy O. Feb 3, 2013 4:47 PM (in response 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.


