SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Layout question NEW

    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

    http://www.karlperformanceparts.com/static/index3.asp

    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

    http://www.karlperformanceparts.com/static/index2.asp

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Welcome to Sitepoint ,

    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.
    Code:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •