I am in the process of updating a site to table less layout. I am having a few issues. I am new to CSS layouts so please understand that.
Ok I have 4 rows. This seems like something to me that should be very simple so Im not sure what I am doing wrong. In this example I have 4 Divs with images. When I preview I am getting a space at the bottom of the DIVS. As you can see by the blue lines
I tried setting height property on the DIVS and this fixed the issue. However my next question is. If I have something that should need to flow down it gets cut off when the DIV height is defined. Is there a fix for this
No you don’t want to use heights as you rightly say when you are holding fluid content. The problem in your first example is simply that images are treated like text and stacked on the base line which leaves room underneath for descenders. As an image doesn’t have a descender you get a small gap instead.
If you set the image to display:block it will no longer be treated like text and will not have a gap underneath.
I always set my images to block at the start of the stylesheet because more often than not that’s what is needed.
e.g.
img{display:block;border:none}
I always remove the border also as linked images get a blue border by default in some browsers and looks nasty.
If you need images to be inline elements then just add a class to them and set them back to display:inline where needed. For inline images you can also try setting the vertical alignment to counter the gap. e.g. img{vertical-align:bottom}. That will usually work but sometimes just moves the gap around to the top instead.