Justify Images

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

I have two rows of images, one has 4 and the other has 3. I want to be able to spread the images out to the sides of the container and keep equal spacing between the images for each row.

Basicly I want to replicate what a table does by defualt.

Quote:
[]__[]__[]__[]
[]____[]___[]
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

maybe something like:
CSS:
Code: [ Select ]
div.row1
{
width:25%;
padding:0px;
margin:0px;
float:left;
}
div.row2col1
{
clear:both;
width:33.3%
padding:0px;
margin:0px;
float:left;
}
div.row2
{
width:33.3%
padding:0px;
margin:0px;
float:left;
}
  1. div.row1
  2. {
  3. width:25%;
  4. padding:0px;
  5. margin:0px;
  6. float:left;
  7. }
  8. div.row2col1
  9. {
  10. clear:both;
  11. width:33.3%
  12. padding:0px;
  13. margin:0px;
  14. float:left;
  15. }
  16. div.row2
  17. {
  18. width:33.3%
  19. padding:0px;
  20. margin:0px;
  21. float:left;
  22. }

HTML:
Code: [ Select ]
<body>
<div class='row1'><img src='image1.jpg' /></div>
<div class='row1'><img src='image2.jpg' /></div>
<div class='row1'><img src='image3.jpg' /></div>
<div class='row1'><img src='image4.jpg' /></div>
<div class='row2col1'><img src='image5.jpg' /></div>
<div class='row2'><img src='image6.jpg' /></div>
<div class='row2'><img src='image7.jpg' /></div>
</body>
  1. <body>
  2. <div class='row1'><img src='image1.jpg' /></div>
  3. <div class='row1'><img src='image2.jpg' /></div>
  4. <div class='row1'><img src='image3.jpg' /></div>
  5. <div class='row1'><img src='image4.jpg' /></div>
  6. <div class='row2col1'><img src='image5.jpg' /></div>
  7. <div class='row2'><img src='image6.jpg' /></div>
  8. <div class='row2'><img src='image7.jpg' /></div>
  9. </body>


I haven't tested this, but I think it should work ...
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

I'm not too sure what you mean when you say tables do that by default, since I can't replicate what you have in your diagram - maybe your picture is misleading?

Anyway, going strictly by your text-image I came up with this:



Code: [ Select ]
<div id="gall">
<img src="test.jpg" alt="" width="114" height="104" />
<img src="test.jpg" alt="" width="114" height="104" />
<img src="test.jpg" alt="" width="114" height="104" />
<img src="test.jpg" alt="" width="114" height="104" />

<img class="cent" src="test.jpg" alt="" width="114" height="104" />
<img class="cent" src="test.jpg" alt="" width="114" height="104" />
<img class="centx" src="test.jpg" alt="" width="114" height="104" />

</div>
  1. <div id="gall">
  2. <img src="test.jpg" alt="" width="114" height="104" />
  3. <img src="test.jpg" alt="" width="114" height="104" />
  4. <img src="test.jpg" alt="" width="114" height="104" />
  5. <img src="test.jpg" alt="" width="114" height="104" />
  6. <img class="cent" src="test.jpg" alt="" width="114" height="104" />
  7. <img class="cent" src="test.jpg" alt="" width="114" height="104" />
  8. <img class="centx" src="test.jpg" alt="" width="114" height="104" />
  9. </div>


Code: [ Select ]
#gall {width: 480px; border: 1px solid #000}
.cent {margin-right: 64px}
.centx {margin-right: 0px}
  1. #gall {width: 480px; border: 1px solid #000}
  2. .cent {margin-right: 64px}
  3. .centx {margin-right: 0px}



Which all ends up looking like this:
Image


Basically I'm using the width of the container to constrain the top row of images and then controlling the right-margin on the images in the bottom row to get the spacing to match that of your diagram.
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

ps

Or you can just have two rows of images, each row in its own div.
On the second row you can use {text-align: justify}, which results in exactly the same thing as I have above. A lot simpler.
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

I tried using justify but it didnt seem to work. I dont really want to have set margins because I would lie it to spread any number of images out equaly.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

How about this...

The css...
Code: [ Select ]
.imgcontainer {
 width: 600px;
 height: auto;
}
.imgs {
 display: inline;
 margin-left: auto;
 margin-right: auto;
}
  1. .imgcontainer {
  2.  width: 600px;
  3.  height: auto;
  4. }
  5. .imgs {
  6.  display: inline;
  7.  margin-left: auto;
  8.  margin-right: auto;
  9. }

And the HTML is...
Code: [ Select ]
<div class="imgcontainter">
<div class="imgs"><img src="test.jpg" alt="" /></div>
<div class="imgs"><img src="test.jpg" alt="" /></div>
<div class="imgs"><img src="test.jpg" alt="" /></div>
<div class="imgs"><img src="test.jpg" alt="" /></div>
</div>
  1. <div class="imgcontainter">
  2. <div class="imgs"><img src="test.jpg" alt="" /></div>
  3. <div class="imgs"><img src="test.jpg" alt="" /></div>
  4. <div class="imgs"><img src="test.jpg" alt="" /></div>
  5. <div class="imgs"><img src="test.jpg" alt="" /></div>
  6. </div>


I haven't tested it but I'm sure it would would... at least I think that it should work :o

At least it worked on my other stuff... :lol:
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

No, that doesnt work either. It equal spaces images but if I have four images on the first row and three on the second, the three below line up with the first three on the top. Im looking for equal spacing of all images to the edge of the container.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

I'll probably receive some flak for saying this, but if it's at least close to the right context, why not just actually use a table?
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

spork wrote:
I'll probably receive some flak for saying this, but if it's at least close to the right context, why not just actually use a table?

I was thinking the same thing. I mean, you don't want to use tables for the whole layout of your website, but using tables to display data or images within a website is perfectly acceptable. That's what they were made for after all.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

Using tables is okay if you use them correctly... :)

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 46 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.