HoneyWine HoneyWine - 2 years ago 62
HTML Question

How to put image tiles properly without colum gap or row gap in between using only CSS?

I'm new to HTML and CSS. For one of my projects, I need to put 16 images into a 4x4 grid of tiles on a webpage. These tiles cannot have gaps between them, and they need to stretch to fill the browser from side to side. They also should only scroll vertically. We are only allowed to use JavaScript or JQuery so I can only use HTML and CSS.

I wrote 4 div elements, each represents a row; inside each div, a span element holds 4 images - that's how I made the 4x4 grid. A code snippet looks like this:

/* One row in a div*/
<div class="map">
<img src="map_images/1.png">
<img src="map_images/2.png">
<img src="map_images/3.png">
<img src="map_images/4.png">

I also wrote a navigation bar that should float above the background images in the upper right corner:

/* 4 div elements of 4 rows before this code*/
<div id="nav">
<div><a href="foo.html">Foo</a></div>
<div><a href="boo.html">Boo</a></div>

For the above code, my stylesheet looks like this:


#nav {
position: absolute;
top: 0;
right: 0;
z-index: 10;

However, I've encountered several problems at this point.

First, I still have column gaps and row gaps between all 16 images. No matter what values I set map margin and padding to, nothing changes. I even tried negative values, still nothing changed. Can someone tell me how to go about this problem, eliminating all gaps?

Secondly, I googled and learned that z-index can be used to make div float above background; however, this is no working here and it seems that div #nav stays in the upper right corner as a separate div that does take up space, instead of floating above. Any suggestions on this?

Answer Source

All I had to do was set float: left and width: 25% on the images in CSS

.map img{
    float: left;
    width: 25%;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download