CSS: a simple layout won't work in CSS

A simple layout is attempted in CSS but can't be made into practice...

The result desired is displayed on:
http://www.0011.com/layout/want_to.html

(it is validated as HTML 4.01 Strict)

but that is done using a table. I don't want to use a table because i
think for some browsers, if there are 100 rows... then the table won't
be rendered until all 100 rows of images have been detected for the
width and height... the page may be empty until all 100 images are
loaded. (that might be for some older browsers). Nevertheless, I want
to try using span or div to do it.

A big issue is that I don't know the size of the image in advance (it
can be any image in the database).

so I tried just using a div with "vertical-align: middle" and it
doesn't work, as in

http://www.0011.com/layout/try1.html

and then "line-height:100%" using a span and it doesn't work, as in

http://www.0011.com/layout/try2.html

and also floating the 2 div left and right, and with the right hand
side "height:1em;margin:auto 0" just like centering a div
horizontally and won't work.

http://www.0011.com/layout/try3.html

i tried height: 100% and vertical-align: middle and even the the
height: 100% won't work, as indicated by the dashed border.

http://www.0011.com/layout/try4.html

again, the image on the left is unknown for the size as it is an image
from the database. Does somebody know how to make it happen without
using a table and without using javascript to get the size of the
image? thanks very much!

 

Your line-height:100%;vertical-align:middle and being outside the tables are probably whats causing your issues.

I would use:

For text:

style="text-align:center;font:32px sans-serif

Code (markup):

For the Table:

<table style="margin:0 auto">

Code (markup):

 

thanks for offering to help. If i use table, i could get it to work, as in the very first link. the real thing is, i want to do it without using table (sort of as a challenge to CSS).

 

First, I can't tell what you're doing. The only difference I saw on the first link was the orange border. You want an image centered only from side to side, with text to the right of it vertically centered to the image??

First, if most of the images where in a certain size range, you could in theory set the size in HTML or CSS. This is not a good idea if a lot of them are small like the puppy and a few are really really huge like some Flickr photo, but if they're all about in the same range you won't get too much loading.

Second, you can have a normal page and have the puppy part in a table, that's no problem if CSS just can't hack it. To make a browser render the table quicker, say in the CSS:
table {
table-layout: fixed;
}

This tells the browser that the first row is setting the width of the whole table. Meaning any other rows had better be the same column widths etc. But it's a shortcut. Once the browser knows how wide the table will be, it can render everything else fine and fast, because it doens't have to keep recalculating.

 

Yes, sorry, the real thing is "how to vertically center the text on the right"... (image size unknown beforehand)

Let's say just for exploring CSS's way of working, how can that be done without using table?

 

Hmmm er yeah. It can. However with CSS the way it currently is, it will always take more code than a table, because the table is the only thing I can think of that tells all the other elements how high it is. So, if one thing in the row gets taller, then the total height it known to be taller and things vertically aligned can adjust accordingly.

Now, that said, there are some things you could try-- but it depends on the range and variation of the images. If they are all kinda close to each other in width, you could try this:
http://stommepoes.nl/puppytest.html
(only tested in FF 1.5... I suspect IE will be kwazy)

Because in smarter browser who follow the spec, floats should shrink-wrap to their contents. So I took a container, floated it (with position: relative and left: a percent for centering... only works if the range in image widths is small) put the image in it, and gave a right padding equal to the width of the text. This is something you might be able to control... the width of the text (it should wrap down as the text gets longer). The text sits in a box which is absolutely positioned at the bottom right, with a height of 60%. This is where IE6 pukes and I dunno about 7. Opera seems okay with it so I'll assume Konqueror and Safari are too.

So, it's a trick, it kinda works but I'm not sure what to do about IE... I'm trying bottom margins with % but this only works for a range of images. Didn't look at IE7.

 

> http://stommepoes.nl/puppytest.html

thanks... looks like it works... so it is using the "absolute positioning that is relative to its "relative positioned" container... that's smart. right now as it is, it is putting the box at the bottom-right corner and then using a height of 60% of container to simulate being centering. ideally, it may be "height: 50% + 1em" but CSS probably won't support it.... is there some other way to simply make it centered vertically? any other method... wow for such a simple requirement, there is a lot involved...

 

For CSS, yes there's a lot required : ) If IE supported display: table, all your problems would be solved PLUS there'd be no tables. But that's not going to happen (by the way, I checked my puppytest in IE7 and it also works). The simplest leanest code will be a table.

If IE were not your concern, the next simplest easier leanest method (if having the thing NOT in a table was extremely important) then display: table on a main container, and display: table-row on the image-text part, and display: table-cell on both the image and the text seperately would do it. Vertical align: middle works in this manner as the elements try to mimic a table visually and thus will act like a table as far as everyone in the row adjusting their heights to the longest member.

But again, IE is a no-go. I dunno if IE8 is going to have it.

Oh PS if I still have the wrapper in there and floated and all, that's from earlier testing and is not needed. However if you use the display: table method you'll need that extra container because I guess it's Safari who needs a container to be the table, another container to be the table row, and then the individual parts are the cells...

 

hmm... eric.j had a simple solution on

http://www.sitepoint.com/forums/showthread.php?p=3761981#post3761981

and it probably can lead to more understanding of the
inline elements (probably need to read some reference like the CSS
Definitive guide by Eric Meyer)

 

The same goes for text: (to vertically center the "Hello")

THIS WON'T WORK: even if you add style="vertical-align:middle" to the outer div, it won't work either.

<div>
    <span style="font-size:100px;">XY</span><span style="vertical-align:middle">Hello</span>
</div>

HTML:

THIS ALSO WON'T WORK: even if you add style="vertical-align:middle" to the outer div, it also won't work either.

<div>
    <span style="vertical-align:middle"><span style="font-size:100px;">XY</span>Hello</span>
</div>

HTML:

NOW if the vertical-align is added to the big text portion, now the small text is vertically centered... this is wrecking my brain right now

<div>
    <span style="font-size:100px;vertical-align:middle">XY</span>Hello
</div>

HTML:

 

Erik's a clever one, even though he thinks he isn't. : )

The bigger of the two is always the one you'd want to add vertical align to. (Close that second span)

The smaller text has a little invisible line running underneath all the non-descending letters (so the bottom of these letters, but not gjpq etc...). The Baseline.

The large text, or an image which is still inline, also has a baseline. They also have an x-height (the size of a lower-case letter without an ascender like "x").

Vertical-align: middle on the big thing makes the middle of it (the middle of the x-height I think) line up with the smaller text's baseline, so the image or large text is being moved DOWN to the level of the smaller text.
http://stommepoes.nl/textimage.gif