Jump to content

Creating a tableless image grid with CSS


jpf566

Recommended Posts

Hey guys, as always I’m trying to do something seemingly simple and am having some bizarre issues ☺ I’m just trying to make a simple image grid without using tables.

 

sheffieldfurniture.com/imagegrid/furniture.html

First issue is, why is there a space between the images here? (in most browsers) It seems like it’s adding a margin although Chrome developer tools is not saying that the images have any margin applied to them. I do want to have the images spaced out but I can’t do the math necessary for doing that if some browsers are going to be randomly adding a margin.

 

 

sheffieldfurniture.com/imagegrid/furniturefloat.html

I was able to fix this by floating everything left. Is this the proper fix? It still bugs me that I couldn’t figure out why the images had space in-between

 

 

Let me know if I’m going about this wrong, is this how you guys would do a simple images grid? Also, I suck at math, how would you go about determining how large to make the images and how much margin? The parent container will be 960 Pixels and I’d like rows of 5 across to be centered

Edited by jpf566
Link to comment
Share on other sites

Edit this code in the head section style tag:-

#content img {
margin:0px; display: block; float: left;
}

 

The img element is normally an inline element and margin won't process on an inline element so make it a block element.

 

It may only solve part of your problems, but it's a start.

 

Your actual image size is 188*188px not 180*180px so edit all the markup sizes to delete the 180px sizes (you don't need sizes unless you want to resize the image)

<img src="images/bed.jpg" />

<img src="images/bed.jpg" />


<img src="images/bed.jpg" />


<img src="images/bed.jpg" />


<img src="images/bed.jpg" />

<img src="images/bed.jpg" />

and edit the #content style width to 5 * 188px = 940px; and the margin: auto will center it.

#content {

width: 940px; /*916px;*/
padding:0px;
background:#D9D9D9;
margin-left:auto;
margin-right:auto;
margin-top:  50px;
}


Edited by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...