How to have an array of images side by side using css/html


Tags: html,css

Problem :

I am using css/html and trying to get a sort-of "array" of different images smack side by side similar to this:

In the css file:

#header_index   {background:#FFFFFF url('image1.jpg') repeat-x 10px 10px; padding:20px; height:240px; }

In the html file:

<div id="header_index"></div>

That sticks image1.jpg side-by-side horizontally.

What I want is to have the same exact look, but with multiple images.

How can I get an "array" or whatever of images so that it's image1.jpgimage2.jpgimage3.jpg with no border at all. I tried using a table and divs but could not get rid of the border and besides I want to try to use the same approach that I am already using (where the image is specified in the css file).

Thanks.



Solution :

Let's say you want 4 images on each row. Therefore, there will be 4 columns and each column will take up 25% of the width.

<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>
<div class="col-1-4"></div>

Let's set there width in the css and float the div to the left so they are not in the flow of the document.

.col-1-4{
  width:25%;
  float:left;
}

Now, we're going to add an image inside each div. Here's one example div.

<div class="col-1-4">
  <img src="(PUT URL OF IMAGEHERE)"/>
</div>

As you can tell, the image is larger than the div. So let's constrain the width for all images to fit inside the column div.

img{
  max-width:100%;
}

    CSS Howto..

    How to view the compiled css from sass files in ruby on rails?

    How to submit data to another file as it is

    How to style radcombobox item so that words that wrap are separated

    How can I make a button change its position after being clicked?

    How to make header in css but im using opacity?

    How to update the attribute while overriding a style defined in css?

    CSS How to multiple background + gradient?

    How do I add a Css file to my Class library?

    How to create an highlight animation when a control gets focused [closed]

    How can I give an image a black opaque overlay?

    How to design a full width bar with HTML and CSS [closed]

    CSS - How to insure that a input will be in the middle of a specific area

    how to add class to razor form and give padding?

    How can I get my drop-down to not open unless the li is hovered?

    How to remove css from DOM

    How to align with digits inside to the right, jQuery

    How to use environment variables in ReactJS imported CSS?

    How to increase checkboxes size with css which work in Google Chrome?

    CSS/HTML how not to overlap fixed header

    How to php echo content into
    classes dynamicaly [closed]

    How to give the a specific background color in CSS?

    How to refer css style from another?

    How can I make a circle using css and apply it to my header?

    How to use CSS' “rotateX()” with jQuery's animate() on multiple elements with delay

    How to vertically center image and text in a block element? [CSS]

    How to fix maximum width of a div? If contents of that div's exceeds than maximum width, we get scroller?

    jQuery increase box to show overflow contents

    How can I enlarge a table row when hovering over it? - Variation

    How to add content to an input with css? [duplicate]

    How can a user add content to a website? [closed]