#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    98
    Rep Power
    11

    DIV - CSS positioning problem.


    I have a page with a number of thumbnails, each displayed individually in a DIV. The thumbnails (DIVs) are grouped in a few sections.

    Please have a look at this page. Resize the browser width and see what happens to the last row of images in each section. Some do align left as they should, but some do align right.

    Can anybody explain to me why this is happening. Or better still, what I should do about it?

    Oh yes, I use this stylesheet:
    Code:
    a : link, a : active, a : visited {
    	text-decoration : underline;
    	background : transparent;
    }
    a : hover {
    	text-decoration : underline overline;
    	background : transparent;
    }
    
    body {
    	background: #FFF url(Background.gif);
    	font: normal 13px/normal Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #000;
    	text-decoration: none;
    	text-align: left;
    	margin: 0px 0px 0px 0px;
    } 
    
    div.programmers {
    	float : left;
    	width : 150px;
    	margin: 0px 8px 15px 8px;
    	text-align : center;
    }
    
    div.spacer {
    	clear : both;
    }
    
    h1 {
    	font: normal 16px/30px Trebuchet MS, Tahoma, Verdana, Arial;
    	color: #FFF;
    	text-decoration: none;
    	text-align: center;
    	vertical-align: middle;
    } 
    h1.phw {
    	background-image : url(xp-phw.png);
    } 
    .plaintekst {
    	background : transparent;
    	font : normal 13px/normal Verdana, Geneva, Arial, Helvetica, sans-serif;
    	text-decoration : none;
    	color : #000;
    } 
    .plaintekst p {
    	margin-bottom: 15px;
    }
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    451
    Rep Power
    0
    try using

    left-margin:auto;
    right-margin:auto;

    i think that will just center it. also, make the blue bar to the last picture a big DIV with a bunch of small DIVs inside (much like Tables and TD's) if you have already. then use float: left; or float:right;
  4. #3
  5. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    It comes down to some t-nails being taller than others due to the extra line in the caption. When a floated element bumps into one of these tall pics, it stops there. The cure for this is to guarantee all t-nails + caption are the same height. I usually make all captions the same number of lines.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    98
    Rep Power
    11
    Thanks a lot, that did the trick indeed

IMN logo majestic logo threadwatch logo seochat tools logo