lining up photo's in css columns

#1

Using a 4 col css page, I cannot get the photo's to line up with text
added. I have use float and get different results.

I have try it a number of ways with no luck.

If there next to no text, it works. The text will vary from row to row
and on over 3,000 pages and trying to get the same script for each
page.

I want the text to start at the top of photo's and if it has to wrap
around it, I want the next row to be even.

I have try also without col's <photo> <photo> <photo> <photo> where float is in the
class and work if no text. If I add text, it push the photo below it
out of line. If I move float to the photo, it kills the page.

http://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009phaseII-2.html

Float is with the photo
http://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009phaseII-6.html

http://transit.davidfisher.biz/testphoto.html

any help is welcome
thanks

#2

In article
<61929c14-91dd-4ff3-8617-60ea113f6861 (AT) r2g2000yqm (DOT) googlegroups.com>,
drum118 <drum118 (AT) hotmail (DOT) com> wrote:

Quote:

Using a 4 col css page, I cannot get the photo's to line up with text
added. I have use float and get different results.

I have try it a number of ways with no luck.

If there next to no text, it works. The text will vary from row to row
and on over 3,000 pages and trying to get the same script for each
page.

This is a well known problem. There are a few options and they narrow
drastically, the more and stricter your criteria. They head, in fact,
towards one technically worry free and easy solution, the HTML table.

But let's suppose that some of your main criteria include no HTML table,
cross-browser adaptability and easy maintability. You are very modest in
wanting only 4 columns (and I suspect it is because you think you should
not use a table rather than because you really want to take real
advantage of a float layout. Real advantage would be to allow more cols
*and certainly less* to adapt to different sized screens. The
adaptibility you are getting looking at one of your URLs is pretty well
non existent (over that of tables). In other words, you are going to go
to a lot of trouble for not much gain by not using tables.

If you insist on non tables, please state any relevant criteria. For
example, I notice from your URls that it is thumbnails and all the same
size you are wanting to display. Is that correct for your real aim? If
they are different sizes and you do not know where things might go on
your page, this introduces a further element of complexity (all
automatically handled by tables, I say again.)

--
dorayme

#3

drum118 wrote:

Quote:

Using a 4 col css page, I cannot get the photo's to line up with text
added. I have use float and get different results.

I have try it a number of ways with no luck.

If there next to no text, it works. The text will vary from row to row
and on over 3,000 pages and trying to get the same script for each
page.

I want the text to start at the top of photo's and if it has to wrap
around it, I want the next row to be even.

<div class="thumb">
whatever
</div>

..thumb{
width: some-width;
display: inline-block;
vertical-align: top;
margin: some_margin;
}

see earlier posting in this group on fixes for early version of IE and
inline-block;

You will need to specify a width, but not a height. If any content in
the thumb container is floated you will have to use one of the
techniques for giving the containing block a height. I believe all this
is in an earlier post of mine on lists.

Jeff

Quote:

I have try also without col's <photo> <photo> <photo> <photo> where float is in the
class and work if no text. If I add text, it push the photo below it
out of line. If I move float to the photo, it kills the page.

http://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009phaseII-2.html

Float is with the photo
http://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009phaseII-6.html

http://transit.davidfisher.biz/testphoto.html

any help is welcome
thanks

#4

On Jul 15, 7:56*pm, jeff <jeff_th... (AT) att (DOT) net> wrote:

Quote:

drum118 wrote:
Using a 4 col css page, I cannot get the photo's to line up with text
added. I have use float and get different results.

I have try it a number of ways with no luck.

If there next to no text, it works. The text will vary from row to row
and on over 3,000 pages and trying to get the same script for each
page.

I want the text to start at the top of photo's and if it has to wrap
around it, I want the next row to be even.

div class="thumb"
whatever
/div

.thumb{
* * * * width: some-width;
* * * * display: inline-block;
* * * * vertical-align: top;
* * * * margin: some_margin;

}

see earlier posting in this group on fixes for early version of IE and
inline-block;

* You will need to specify a width, but not a height. If any content in
the thumb container is floated you will have to use one of the
techniques for giving the containing block a height. I believe all this
is in an earlier post of mine on lists.

* *Jeff

I have try also without col's <photo> <photo> <photo> <photo> where float is in the
class and work if no text. If I add text, it push the photo below it
out of line. If I move float to the photo, it kills the page.

http://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009p...

Float is with the photo
http://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009p...

http://transit.davidfisher.biz/testphoto.html

any help is welcome
thanks

My fear was answer and that going with tables.

I suspected I would have to use tables to obtain what I was shooting
for will trying to stay away from it.

As long as I use only the photo number and date, I get what I want
using CSS. Anything else, accept what shows up as example 1 and forget
the other 2 plus others not posted here.

I will give thumb a few try before moving to tables.

As for width, I'm trying to use the same size for look and standard
page code. The thumbnail leads to the full size of the photo.

I looked for examples to see anything close to what I want, but could
not find anything.

I'm trying to make my pages to fit any sizes of monitor or TV where I
can. As for hand devices, don't have anything to test with.

Thanks

#5

drum118 wrote:

Er, which bit of what post are you replying to?

Quote:

My fear was answer and that going with tables.

What's wrong with that?

You are trying to position stuff in a grid. A grid in HTML is best realised
with a table.

#6

rf wrote:

Quote:

drum118 wrote:

Er, which bit of what post are you replying to?

My fear was answer and that going with tables.`

What's wrong with that?

You are trying to position stuff in a grid. A grid in HTML is best realised
with a table.

Lets say you want to use your horizontal space, whatever that is, to
the fullest use (fluid layout). With a table, you have to specify the
number of cells. So if in browser width x, you will have y number of
cells, irregardless of whether you could have had twice as many, or
whether this forces a horizontal scrollbar at a narrower window.

With either float: left or display: inline-block, the row will wrap a
the end of the line no matter where it is, something a table never
could. Inline-block does these in a cleaner fashion than floating as you
don't have to worry about heights. I switched over to inline-block some
months ago, it works superbly.

Jeff

Quote:

#7

In article <h3m638$7ac$1 (AT) news (DOT) albasani.net>, jeff <jeff_thies (AT) att (DOT) net>
wrote:

Quote:

rf wrote:
drum118 wrote:

Er, which bit of what post are you replying to?

My fear was answer and that going with tables.`

What's wrong with that?

You are trying to position stuff in a grid. A grid in HTML is best realised
with a table.

With either float: left or display: inline-block, the row will wrap a
the end of the line no matter where it is, something a table never
could. Inline-block does these in a cleaner fashion than floating as you
don't have to worry about heights. I switched over to inline-block some
months ago, it works superbly.

IE6 and 7 do not give good support for this, so you might be doing
various tricky things to make IE play along.

---

If all the thumbnails are 112 x 149 as in OP's examples it makes things
easier for designing the page.

With a bit more management and tweaking to suit the situation, the
following CSS is not exactly complex and uses space reasonably
efficiently:

If your caption spiels are within certain limits, you can tweak the
max-width of the floated div boxes to lessen the chances of text
wrapping under the pic and so making the heights variable and increasing
the possibility of snagging. A bit of classing for when one has
thumbnails without spiels and this is one way to go...

Another variation is to stick a min height on them all to allow for the
rarer wrap but keep a certain even regularity...

Te beauty of floats, as you point out is a real fluidity which tables
simply can never give one.

<http://dorayme.890m.com/thumbnailsWithCaptionsFloats.html>

(Temporary trouble with my paid server so I use this free server for
this minute which might have some host junk on it? They are always doing
something or other I don't want. You would think they would give one
better value for ones outlay. They are now virtually advertising,
unannounced to me, on these pages which they promised they would not do.
I gave them $0 - that is $US0 - and see how they treat me!)

--
dorayme

#8

dorayme wrote:

Quote:

In article <h3m638$7ac$1 (AT) news (DOT) albasani.net>, jeff <jeff_thies (AT) att (DOT) net
wrote:

rf wrote:
drum118 wrote:

Er, which bit of what post are you replying to?

My fear was answer and that going with tables.`
What's wrong with that?

You are trying to position stuff in a grid. A grid in HTML is best realised
with a table.

With either float: left or display: inline-block, the row will wrap a
the end of the line no matter where it is, something a table never
could. Inline-block does these in a cleaner fashion than floating as you
don't have to worry about heights. I switched over to inline-block some
months ago, it works superbly.

IE6 and 7 do not give good support for this, so you might be doing
various tricky things to make IE play along.

There are two options, one is simply to use conditional comments
(Bootnics suggestion):

<style type="text/css">
..display_inline_block_style{
display:inline-block;
width: some-width-px;
overflow: hidden; /* so you can have floated content */
}
</style>



or use spans instead of divs, as that is the problem IE has as it
doesn't want to inline-block a block level tag.

Example of span style here:

http://interstatesupply.com/shop.php?shop=view_category&category=CHEMICAL+DEFE NSE

I think I posted that before.

Neither is complex and both work well.

Quote:

---

If all the thumbnails are 112 x 149 as in OP's examples it makes things
easier for designing the page.

With a bit more management and tweaking to suit the situation, the
following CSS is not exactly complex and uses space reasonably
efficiently:

If your caption spiels are within certain limits, you can tweak the
max-width of the floated div boxes to lessen the chances of text
wrapping under the pic and so making the heights variable and increasing
the possibility of snagging. A bit of classing for when one has
thumbnails without spiels and this is one way to go...

Another variation is to stick a min height on them all to allow for the
rarer wrap but keep a certain even regularity...

Te beauty of floats, as you point out is a real fluidity which tables
simply can never give one.

http://dorayme.890m.com/thumbnailsWithCaptionsFloats.html

I think this works well, and I used to do something very much like
this, but I like inline-block because there is no need to worry about
heights.

Jeff

Quote:

(Temporary trouble with my paid server so I use this free server for
this minute which might have some host junk on it? They are always doing
something or other I don't want. You would think they would give one
better value for ones outlay. They are now virtually advertising,
unannounced to me, on these pages which they promised they would not do.
I gave them $0 - that is $US0 - and see how they treat me!)

#9

In article <h3mdgv$gp7$1 (AT) news (DOT) albasani.net>, jeff <jeff_thies (AT) att (DOT) net>
wrote:

Quote:

IE6 and 7 do not give good support for this, so you might be doing
various tricky things to make IE play along.

There are two options, one is simply to use conditional comments

Got a URL of a page of pic/caption boxes of varying amounts of text that
have no problems on all major browsers and that adjust to use available
space in efficient manner?

--
dorayme

#10

dorayme wrote:

Quote:

In article <h3mdgv$gp7$1 (AT) news (DOT) albasani.net>, jeff <jeff_thies (AT) att (DOT) net
wrote:

IE6 and 7 do not give good support for this, so you might be doing
various tricky things to make IE play along.
There are two options, one is simply to use conditional comments

Got a URL of a page of pic/caption boxes of varying amounts of text that
have no problems on all major browsers and that adjust to use available
space in efficient manner?

Nothing at the moment that isn't behind a password. I usually work in

fixed width designs.

I'll put up an example when I have time. Like I know when that will be!

Jeff