Creating rows of divs

(2 Pages)
1
2
→

27 Replies - 783 Views - Last Post: 21 February 2013 - 07:36 PM

#1 wadori

D.I.C Head

Reputation: 0

Posts: 57
Joined: 30-October 09

Creating rows of divs

Posted 20 February 2013 - 12:01 AM

I am trying to create a table-like layout of divs (each containing a single picture) that line up next to each other in rows, in this case three divs to a row. Here is my code:

<html>
<head>
<style>
.endorsementfloat {width: 10%; height:10%;  margin-right:5%; float:left } /* max-height:10%, max-width:10%; */	
</style>
</head>

<body>

<div class='endorsementfloat'> <a href='http://www.google.com/'><img src='pics/snowcritter.jpg' width='100%'></a> </div>
<div class='endorsementfloat'> <a href='http://www.google.com/'><img src='pics/snowcritter.jpg' width='100%'></a> </div>
<div class='endorsementfloat'> <a href='http://www.google.com/'><img src='pics/snowcritter.jpg' width='100%'></a> </div>
<div class='endorsementfloat'> <a href='http://www.google.com/'><img src='pics/snowcritter.jpg' width='100%'></a> </div>

<div style="clear:both"></div>
<div class='endorsementfloat'> <a href='http://www.google.com/'><img src='pics/snowcritter.jpg' width='100%'></a> </div>
<div class='endorsementfloat'> <a href='http://www.google.com/'><img src='pics/snowcritter.jpg' width='100%'></a> </div>
<div class='endorsementfloat'> <a href='http://www.google.com/'><img src='pics/snowcritter.jpg' width='100%'></a> </div>
<div class='endorsementfloat'> <a href='http://www.google.com/'><img src='pics/snowcritter.jpg' width='100%'></a> </div>

</body>
</html>

You can see the output at www.wardricker.com/temporary.html.

In IE the pictures all line up nicely in rows, but are more than 10% in height. It is really weird in Firefox, which seems to overlap the top row with the second row, but 10% lower on the screen. How can I make the divs the height that I want?

Is This A Good Question/Topic? 0

Replies To: Creating rows of divs

#2 andrewsw

Provides a RESTful service

Reputation: 1064

Posts: 3,340
Joined: 12-December 12

Re: Creating rows of divs

Posted 20 February 2013 - 12:35 AM

You only need one DIV. Set its width to slightly more than the total width (plus padding) of the first four images.
Add the float property to the images.

The width attribute should be a number (representing pixels) not a percentage:

<img src='pics/snowcritter.jpg' width='100%'>
<!-- should be -->
<img src='pics/snowcritter.jpg' width='100' height='300'>

Give the images some padding to separate them.

With all eight images in the DIV, the ones after the first four will drop below - into a second row.

Was This Post Helpful? 0

#3 wadori

D.I.C Head

Reputation: 0

Posts: 57
Joined: 30-October 09

Re: Creating rows of divs

Posted 20 February 2013 - 02:08 AM

I can't set both the height and the width because that would distort the image. In the final product there will be all different picture of different shapes and sizes, so some will have to be constrained by height and others by width. That is why I was using divs to create "boxes" that would all be the same size for the pictures to fit into. Otherwise I have to stop and set each picture size individually. Also, in the future I may wish to put more than just an image in each box, so I would need to use divs to do that, right?

I tried setting the images using a class with max-width and max-height, but that didn't work. The images just ignore it.

I would also like to use percentages, which is what I usually do. If my overall scheme is set up using percentages and I set my individual images/divs to pixels, then I don't know how things are going to fit together on any particular computer screen. You rather need to be consistent, don't you?

Also, I set the div width to 900 and the images' width to 200, but they didn't drop to the next line after the first four, so that doesn't seem to be working either.

Was This Post Helpful? 0

#4 FerretHolmes

D.I.C Head

Reputation: 25

Posts: 106
Joined: 12-November 12

Re: Creating rows of divs

Posted 20 February 2013 - 02:34 PM

If you want to set max-width and height to an image, apply it to the image style in css;

img { max-width: 10%; max-height: 10%; }

That won't solve your problem though.

Quote

If my overall scheme is set up using percentages and I set my individual images/divs to pixels, then I don't know how things are going to fit together on any particular computer screen.

That is why often you see developers put their content in wrappers with a fixed width. Usually they are between 940-1000px because the average lowest resolution used is 1024x768. Using the wrapper ensures that the content will be no wider than the minimal screen (not considering mobile devices of course).

Was This Post Helpful? 0

#5 andrewsw

Provides a RESTful service

Reputation: 1064

Posts: 3,340
Joined: 12-December 12

Re: Creating rows of divs

Posted 20 February 2013 - 03:09 PM

FerretHolmes, on 20 February 2013 - 02:34 PM, said:

If you want to set max-width and height to an image, apply it to the image style in css;

img { max-width: 10%; max-height: 10%; }

This should have no effect. Image dimensions are determined by the actual size of the image, unless a specific height and/or width are set (in pixels or other units), in which case the image is shrunk, or stretched.

A percentage height or width (in the CSS for the image) will have no effect either unless the images' parent has a specified width, or all descendant elements have their, for example, width set to 100%.

Another option is to set the images as backgrounds to other elements and use background-size: cover; - which works in modern browsers - to stretch the image. However, I'm not sure that this is relevant to the OPs intent.

This post has been edited by andrewsw: 20 February 2013 - 03:11 PM

Was This Post Helpful? 1

#6 andrewsw

Provides a RESTful service

Reputation: 1064

Posts: 3,340
Joined: 12-December 12

Re: Creating rows of divs

Posted 20 February 2013 - 03:19 PM

Quote

Also, I set the div width to 900 and the images' width to 200, but they didn't drop to the next line after the first four, so that doesn't seem to be working either.

@OP This won't work unless you put the images in a single DIV and apply the float property (in the CSS) to the images.

Was This Post Helpful? 0

#7 FerretHolmes

D.I.C Head

Reputation: 25

Posts: 106
Joined: 12-November 12

Re: Creating rows of divs

Posted 20 February 2013 - 03:19 PM

Quote

You're right. It's supposed to be a max width set in pixels and a width in percentage.

img {
  width: 50%;
  max-width: 500px;
}

I tend to speak quicker than I should.

This post has been edited by FerretHolmes: 20 February 2013 - 03:20 PM

Was This Post Helpful? 0

#8 andrewsw

Provides a RESTful service

Reputation: 1064

Posts: 3,340
Joined: 12-December 12

Re: Creating rows of divs

Posted 20 February 2013 - 03:26 PM

FerretHolmes, on 20 February 2013 - 03:19 PM, said:

Quote

You're right. It's supposed to be a max width set in pixels and a width in percentage.

img {
  width: 50%;
  max-width: 500px;
}

I tend to speak quicker than I should.

No worries; but, again, the max-width has no effect because image-sizes don't change, unless they are the background to an element with background-size: cover;. And the percentage width will only apply if ALL descendant elements have a specified percentage width, or its immediate parent-element has a fixed width.

@FerretHolmes why don't you build a test page to test your code?

Was This Post Helpful? 0

#9 FerretHolmes

D.I.C Head

Reputation: 25

Posts: 106
Joined: 12-November 12

Re: Creating rows of divs

Posted 20 February 2013 - 03:36 PM

Quote

@FerretHolmes why don't you build a test page to test your code?

That's the good part, I did. When I copied OP's code and manipulated it a bit, using the img { max-width } I got it working. If you use max-width inside of the endoresmentFloat class it will not work. When I set the properties of the img element with max-width and height, they shrunk into the corresponding dimensions.

I just tested using fixed width and a max-width and the results were similar.

EDIT:
I see what you are talking about now. The image container itself is scaled but not the image. With a width of 1000px and max-width of 10% the image would scale to the appropriate proportions with the height. So I would have a 1000px container that has a small image floated left.

This post has been edited by FerretHolmes: 20 February 2013 - 03:40 PM

Was This Post Helpful? 0

#10 andrewsw

Provides a RESTful service

Reputation: 1064

Posts: 3,340
Joined: 12-December 12

Re: Creating rows of divs

Posted 20 February 2013 - 04:00 PM

@FerretHolmes
Being honest, I'm still not quite clear on the OPs requirement.

@OP If you want to continue to work with percentages then you might consider using a table, and either setting the images as backgrounds to each cell (so that they can be easily centred) or insert an image within each cell, leaving the table to stretch to fit the images.

I apologise: I'm still a little unsure on the behaviour you are looking for. Andy.

Was This Post Helpful? 0

#11 Lemur

OpenBSD Head

Reputation: 1111

Posts: 3,059
Joined: 28-November 09

Re: Creating rows of divs

Posted 20 February 2013 - 08:04 PM

Percentages are derived from the parent element. What you want are floats, and to create box elements for all of the images. It may be wiser just to find a premade image gallery.

Edit - No, no tables. Ever. Tables are for tabular data, and using them is extremely bad practice.

Now what's the benefit of a float? They collapse a row if they overflow. Set the width of the parent element to something dynamic and the gallery will sort rows accordingly. Look into the box model, floats, units, and positioning in general.

This post has been edited by Lemur: 20 February 2013 - 08:06 PM

Was This Post Helpful? 0

#12 wadori

D.I.C Head

Reputation: 0

Posts: 57
Joined: 30-October 09

Re: Creating rows of divs

Posted 20 February 2013 - 10:04 PM

FerretHolmes, on 20 February 2013 - 02:34 PM, said:

If you want to set max-width and height to an image, apply it to the image style in css;

img { max-width: 10%; max-height: 10%; }

That won't solve your problem though.

Quote

If my overall scheme is set up using percentages and I set my individual images/divs to pixels, then I don't know how things are going to fit together on any particular computer screen.

You're right. Max-width and max-height didn't solve the problem. Thanks for the tidbit about resolutions, though. That's good to know. I didn't really know what people were using. (What is my resolution anyway?!?!) (-;

andrewsw, on 20 February 2013 - 03:19 PM, said:

Quote

Also, I set the div width to 900 and the images' width to 200, but they didn't drop to the next line after the first four, so that doesn't seem to be working either.

@OP This won't work unless you put the images in a single DIV and apply the float property (in the CSS) to the images.

Yes, that is what I did. Sorry if I wasn't clear.

Was This Post Helpful? 0

#13 wadori

D.I.C Head

Reputation: 0

Posts: 57
Joined: 30-October 09

Re: Creating rows of divs

Posted 20 February 2013 - 10:21 PM

andrewsw, on 20 February 2013 - 04:00 PM, said:

I guess I am "OP"? (Sorry, I am not very familiar with the jargon.)

As Lemur says, I am not supposed to use tables for layout. (I am trying to be a good boy! (-; ) As far as the behavior I am looking for, I just wish to stack a bunch of pictures (or whatever else I wish to include) in what amounts to a bunch of neatly-aligned cells spread out so-many cells to a row (much like a table). Since I am not "allowed" to use a table, I am trying to figure out the proper way to accomplish this.

Was This Post Helpful? 0

#14 Lemur

OpenBSD Head

Reputation: 1111

Posts: 3,059
Joined: 28-November 09

Re: Creating rows of divs

Posted 20 February 2013 - 10:31 PM

<html>
<style>
	.box{
		float: left;
		width: 200px;
		height: 200px;
		background: blue;
		margin: 10px;
	}
	#container{
		width: 1000px;
		border: 1px solid red;
		padding: 10px;
		height: 100%;
		clear: both;
	}
</style>

<div id="container">
	<div class="box"><img width="140px" height="100px" /></div>
	<div class="box"><img width="100px" height="130px" /></div>
	<div class="box"><img width="190px" height="180px" /></div>
	<div class="box"><img width="200px" height="103px" /></div>
	<div class="box"><img width="100px" height="100px" /></div>
	<div class="box"><img width="100px" height="100px" /></div>
	<div class="box"><img width="100px" height="200px" /></div>
	<div class="box"><img width="130px" height="140px" /></div>
	<div class="box"><img width="120px" height="170px" /></div>
	<div class="box"><img width="100px" height="100px" /></div>
	<div class="box"><img width="150px" height="100px" /></div>
	<div class="box"><img width="190px" height="210px" /></div>
</div>

</html>

Try that, it's a bit contrived but it proves the point. Variable image sizes and container boxes.

Was This Post Helpful? 1

#15 wadori

D.I.C Head

Reputation: 0

Posts: 57
Joined: 30-October 09

Re: Creating rows of divs

Posted 20 February 2013 - 10:32 PM

FerretHolmes, on 20 February 2013 - 03:36 PM, said:

When I copied OP's code and manipulated it a bit, using the img { max-width } I got it working. If you use max-width inside of the endoresmentFloat class it will not work. When I set the properties of the img element with max-width and height, they shrunk into the corresponding dimensions.

I don't know any way to set max-width/max-height other than with CSS (ie, in the endorsementFloat class). Is there another way?

You said you used max-width and it didn't work, and then you said that it did. I don't understand what the difference was between the two. Can you clarify?

Was This Post Helpful? 0

(2 Pages)
1
2
→

27 Replies - 783 Views - Last Post: 21 February 2013 - 07:36 PM

Creating rows of divs

Replies To: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Re: Creating rows of divs

Follow & Share

Give It A Try!

Programming

Web Development

Reference Sheets

Bye Bye Ads

Monthly Drawing