CODEWITHSUNDEEP
htmlcss
gathan
gathan

Reputation: 13

css, html, Image alignment

i Have 6 images and need to align them as:

 Img1        Img2

 Img3        Img4

 Img5        Img6

How should I? I am not able to do it properly.

<Image src = "" style = "margin-top: -10em; margin-left: -50em; float: left; width: 450px;" />

<Image src = "" style = "margin-top: -10em; margin-left: -10em; float: left; width: 450px;" />

<Image src = "" style = "margin-left: -120em; margin-top: -50em; float: left; width: 450px;" />

<Image src = "" style = "margin-left: -120em; margin-top: -50em; float: left; width: 450px;" />   

<Image src = "" style = "margin-left: -120em; margin-top: -50em; float: left; width: 450px;" />   

<Image src = "" style = "margin-left: -120em; margin-top: -50em; float: left; width: 450px;" />

The images are of equal size.

Upvotes: 1

Views: 445

Answers (4)

Šime Vidas
Šime Vidas

Reputation: 185883

This does the trick: 

img { float:left; }
img:nth-child(odd) { clear:left; }

Live demo: http://jsfiddle.net/simevidas/9k6ML/1/

Note, some backward browsers (IE...khm) don't support :nth-child(odd).

Upvotes: 0

Steven Ryssaert
Steven Ryssaert

Reputation: 1967

Wrap a <div> - tag around them, like this:

<div style="width:yourimagewith x 2">
  <img src="1" />
  <img src="2" />
  <img src="3" />
  <img src="4" />
</div>

This solution doesn't give you all the fuss with styles and floats and so on. Also, if you add new images, you don't have to add a new div tag after every two images, which seems not maintenance-friendly to me.

Upvotes: 2

corroded
corroded

Reputation: 21564

Sorry to be anal about it but

please please please don't use inline styles.

and PLEASE for the love of god, don't use tables for non-tabular data!

Put them all in a list:

<ul>
  <li><img 1></li>
  <li><img 2></li>
  <li><img 3></li>
  <li><img 4></li>
  <li><img 5></li>
  <li><img 6></li>
</ul>

style them in a separate stylesheet:

ul li {
  float: left;
  width: 49%;
}

or something. Just specify the ul width if you dont want the list to take up the whole screen.

Upvotes: 4

Simon H
Simon H

Reputation: 1745

Simply float each image left and then after every second image put the following <div style="clear: both;"></div> that should fix your problem.

Upvotes: -2

Related Questions