Creating rows of divs

(2 Pages)
←
1
2

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

#16 wadori

D.I.C Head

Reputation: 0

Posts: 59
Joined: 30-October 09

Re: Creating rows of divs

Posted 20 February 2013 - 11:59 PM

Okay, let me see if I can put the question in a clearer way. I have rewritten the code a little:

<html>
<head>
<style>
.endorsementfloat {width: 200; height:100;  margin-right:5; float:left }
</style>
</head>

<body>
<!-- my resolution = 1360 x 768 -->

<div class='endorsementfloat'> <a href='http://www.google.com/'><img src='pics/snowcritter.jpg' width='100%'></a><br />An ugly critter </div>
<div class='endorsementfloat'> <a href='http://www.google.com/'><img src='pics/girl.jpg' width='100%'></a><br />A woman </div>
<div class='endorsementfloat'> <a href='http://www.google.com/'><img src='pics/bird.jpg' width='100%'></a><br />A bird </div>
<div class='endorsementfloat'> <a href='http://www.google.com/'><img src='pics/religion_stats.jpg' width='100%'></a><br />A graph </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>

(once again the output can be seen at www.wardricker.com/temporary.html)

I am using different pictures and am including some text, as I might need to do. Therefore, I think I have to use divs, right? What I want is for the divs to hold to the dimensions that I have given them, 200 x 100 in this example, no matter what I put in them. When I display in IE, the divs take up about half of the height of my 1360 x 768 screen, so roughly about 400 px. The 100 px holds in Firefox, but the bottoms of the pics are cut off by the second row. I don't understand why a div ends up being 400 px high when I have told it to be only 100 px. Or in other words why the picture isn't constrained to fit in the div. Is there a way to set the dimensions of a div so that it will hold?

Was This Post Helpful? 0

#17 Lemur

OpenBSD Head

Reputation: 1123

Posts: 3,078
Joined: 28-November 09

Re: Creating rows of divs

Posted 21 February 2013 - 12:13 AM

overflow: hidden;

Was This Post Helpful? 0

#18 andrewsw

I've got the minerals

Reputation: 1258

Posts: 3,834
Joined: 12-December 12

Re: Creating rows of divs

Posted 21 February 2013 - 12:36 AM

Lemur, on 20 February 2013 - 08:04 PM, said:

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

Saying "No, no tables. Ever." is not good advice, and just repeats a statement found across the internet, without justification.

Tables are a very useful feature of CSS and should be used where appropriate. Yes, it is considered a poor practice (and I agree) to use them to layout a page, and, as you then say, they are to be used for tabular data.

IMO the OP is creating tabular data, it just happens that the data consists of images and other content that he may want to add (captions, etc.).

Was This Post Helpful? 0

#19 andrewsw

I've got the minerals

Reputation: 1258

Posts: 3,834
Joined: 12-December 12

Re: Creating rows of divs

Posted 21 February 2013 - 12:42 AM

Lemur, on 20 February 2013 - 08:04 PM, said:

It may be wiser just to find a premade image gallery.

I don't think this is good advice either. Why should the OP install a gallery or library, of code just to put a few images on his page?

Was This Post Helpful? 0

#20 wadori

D.I.C Head

Reputation: 0

Posts: 59
Joined: 30-October 09

Re: Creating rows of divs

Posted 21 February 2013 - 01:02 AM

Lemur, on 20 February 2013 - 10:31 PM, said:

<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.

Lemur,

Thanks for the code. I added the pics to your code but the pictures came out distorted because you set both the width and the height. They will come out distorted unless I stop to calculate the numbers to keep them proportional (which I don't want to have to do). You can see the output at www.wardricker.com/temporary-lemur.html.

I then made four changes. 1. I changed the height of the cells to 100. That didn't work. They are taller than 100 px. 2. I added some text to some of the cells, as I will probably want to do for some of them. 3. I removed the heights so as to get rid of the distortion. Still messed up. 4. I changed the widths from pixels to 100%. This page can be seen at www.wardricker.com/temporary-myrev.html.

It is still messed up. There doesn't seem to be any way to set a div to a certain height and not have it expand when I put something that doesn't "fit" in it. Is there a way to tell a div to "Stay at 100 high if I set you to 100 high!"?

Was This Post Helpful? 0

#21 andrewsw

I've got the minerals

Reputation: 1258

Posts: 3,834
Joined: 12-December 12

Re: Creating rows of divs

Posted 21 February 2013 - 06:19 AM

wadori, on 21 February 2013 - 01:02 AM, said:

It is still messed up. There doesn't seem to be any way to set a div to a certain height and not have it expand when I put something that doesn't "fit" in it. Is there a way to tell a div to "Stay at 100 high if I set you to 100 high!"?

Lemur mentioned on a previous post to use overflow: hidden;. This will prevent a DIV from expanding.

Was This Post Helpful? 1

#22 bobjob5

New D.I.C Head

Reputation: 3

Posts: 25
Joined: 21-January 13

Re: Creating rows of divs

Posted 21 February 2013 - 06:42 AM

I usually break things up so almost every aspect has a class of its own. Rather than using the one class for all of them I'd simply lay them all out. I like complete control of what I do. I hate HTML dictating the layout in tables. Instead, you could make a table and align them so different resolutions don't screw with the way the tables look.

Good luck.

Was This Post Helpful? 0

#23 wadori

D.I.C Head

Reputation: 0

Posts: 59
Joined: 30-October 09

Re: Creating rows of divs

Posted 21 February 2013 - 09:07 AM

(Sorry for this. I am trying to delete a duplicate post.)

This post has been edited by wadori: 21 February 2013 - 09:10 AM

Was This Post Helpful? 0

#24 Lemur

OpenBSD Head

Reputation: 1123

Posts: 3,078
Joined: 28-November 09

Re: Creating rows of divs

Posted 21 February 2013 - 09:36 AM

andrewsw, on 21 February 2013 - 01:42 AM, said:

Lemur, on 20 February 2013 - 08:04 PM, said:

It may be wiser just to find a premade image gallery.

I don't think this is good advice either. Why should the OP install a gallery or library, of code just to put a few images on his page?

It didn't seem like a few images, and that would be a fast solution that could be easily deployed.

That being said, I stand by that stance on tables. I won't enumerate on all the reasons as I'm typing on a phone, but I will clarify later. For now, trust me when I say bad idea.

The images are distorted because you didn't remove the random size tags I put on there to demonstrate it was variable in nature.

Was This Post Helpful? 0

#25 wadori

D.I.C Head

Reputation: 0

Posts: 59
Joined: 30-October 09

Re: Creating rows of divs

Posted 21 February 2013 - 09:44 AM

andrewsw, on 21 February 2013 - 06:19 AM, said:

Lemur mentioned on a previous post to use overflow: hidden;. This will prevent a DIV from expanding.

Yes, that did it! Sorry I missed that in the previous post. Now my "cells" stay at the height that I set them. That solves the main problem.

There is still one other detail, though, if you are willing. I don't want to have to stop and adjust the contents of each cell to make it fit. Can I make it do that automatically? I added a "content" class to the pictures, with max-width and max-height set to 100%. That constrains the picture to within the box in Firefox, but not in IE. Does anyone know if I can make it work for IE?

(Again, the results can be seen at www.wardricker.com/temporary-myrev.html.)

And, of course, this still only works if I am only putting the single object in the box. If add some text,etc. it could still get cut off. Is there a way to automatically constrain everything to fit in the box, or am I just asking for too much?

Was This Post Helpful? 0

#26 andrewsw

I've got the minerals

Reputation: 1258

Posts: 3,834
Joined: 12-December 12

Re: Creating rows of divs

Posted 21 February 2013 - 10:32 AM

There are errors in your HTML.

I would fix these first. You're missing a DOCTYPE declaration which causes IE to drop into quirks mode;
You have not HEAD, TITLE or BODY tags;

Quote

My revision to Lemur's code:

All content should appear within a tag; put this text within a P tag.

If the HTML is malformed then it is unlikely to behave well or consistently, particularly in IE.

Was This Post Helpful? 0

#27 Lemur

OpenBSD Head

Reputation: 1123

Posts: 3,078
Joined: 28-November 09

Re: Creating rows of divs

Posted 21 February 2013 - 06:11 PM

Now then, as to why I don't think tables are a good idea in this particular case. (I don't intend to give the full rant...)

The flexibility of a gallery type area, text included even, would be very limited. It can't be easily dynamically generated, changed, or otherwise molded. Good programming is modular and things are able to be changed quickly, web is no different.

It's easier is one of the other common ones I hear. In the short run maybe but it becomes a pain if you ever want to modify anything at all. Doing something right the first time is the easiest in relative terms.

Was This Post Helpful? 0

#28 wadori

D.I.C Head

Reputation: 0

Posts: 59
Joined: 30-October 09

Re: Creating rows of divs

Posted 21 February 2013 - 07:36 PM

andrewsw, on 21 February 2013 - 10:32 AM, said:

There are errors in your HTML.

I would fix these first. You're missing a DOCTYPE declaration which causes IE to drop into quirks mode;
You have not HEAD, TITLE or BODY tags;

Quote

My revision to Lemur's code:

All content should appear within a tag; put this text within a P tag.

If the HTML is malformed then it is unlikely to behave well or consistently, particularly in IE.

Wow - you are right! I knew I didn't have the doctype or title tag, but I thought I had the head and body tags in there. How did I miss those??! I did have everything inside the div id=container tag except for the one line "My revision to Lemur's code." I didn't think that would matter, but I have put it all in p tags like you said. I believe everything is correct now. It still acts the same. Perhaps I will just have to resign myself to individually fitting each box's contents into the box. I was just hoping it could be "automatic".

This post has been edited by wadori: 21 February 2013 - 10:15 PM

Was This Post Helpful? 0

(2 Pages)
←
1
2

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

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

Related Topicsbeta

Follow & Share

Give It A Try!

Programming

Web Development

Reference Sheets

Bye Bye Ads

Monthly Drawing

Related Topics^beta