IEx Hell (again): AUTO-SIZING IMAGES in Multiple Columns w/DIV Tags &CSS

[Chris F.A. Johnson]

Very interesting.


Okay, now, do you mean to tell me that _if_ the CSS being applied to a
DIV tag has _not_ given it the instruction to float, it will appear on
its own row? Now that is interesting.

That is basic HTML. If you don't even know which elements are
inline and which are block level (and what those terms mean), how
can you expect to create a web page that works?

 

[MISS CHIEVOUS]

That is basic HTML. If you don't even know which elements (SNIP)

Phhhhhhhhllltt!!!!!!!! We are having way too much fun here. You are
definitely _not_ invited to Happy Hour sir! Begone!

MISS CHIEVOUS

 

[MISS CHIEVOUS]

Yes. . . . But note that it won't clear floats unless you tell it to (by setting
clear).

This is very provocative! I love it!

It's built into the browser.

Thankfully not my concern hee hee! Thank you Ben.

MC

 

[MISS CHIEVOUS]

You would think a browser would understand a paragraph element.

You would think IEx had a brain.
But neither did our last president heh heh.

Let's get Roman: What do you need from me to forge those three
examples dorayme?

MC

 

[dorayme]

You would think IEx had a brain.
But neither did our last president heh heh.

Let's get Roman: What do you need from me to forge those three
examples dorayme?

MC

I need you to look at the *very last* example html page I made for you,
the one where I gave you the extra treat of the two 50% divs on the
third row. And then to tell me how it needs to be different to give you
the look you want.

Then this wild party can get back on the road. When we are done here,
MISS CHIEVOUS, we are going to make an HTML ROAD MOVIE. And it is going
to be a BIG BOX OFFICE SUCCESS!!!

 

[MISS CHIEVOUS]

I need you to look at the *very last* example html page I made for you,
the one where I gave you the extra treat of the two 50% divs on the
third row. And then to tell me how it needs to be different to give you
the look you want.

If you're referring to your fraction5.html . . .
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - -
http://www.geocities.com/a4248713/ABSOLUTE.jpg is probably the closest
to your fraction5. The grey bits represent the spacing I'm trying to
achieve:
1. to the right of COLUMN1
2. H separating the cells in ROW2
3. H separating the cells in ROW3
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - -
4. There is no header.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - -
5. There is no footer.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - -
6. If you observe the colored triangle in the lower-left-hand corner
of the TEXT CELL in ROW2 on (any of the) three layouts I posted at
http://www.geocities.com/a4248713/DIV_CONCEPTS.html
you'll see that that _partiicular_ cell needs to be vertically-aligned
on the bottom. In other words, PINK needs to snap to the _bottom_ of
however tall TEXT CELL gets.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - -

You can clip the text filler from my latest effort* (which follows
your numbering convention) here --
http://www.geocities.com/a4248713/IExpand-O-GRAPHIC_5.html
-- and if you think that looks bad, here is what your fraction5 looks
like in Internet Explorer heh heh --
http://www.geocities.com/a4248713/FRACTION5.jpg

*although yours at least honored the background color of the TEXT
CELL; mine is just . . . post modern lol.

 

[MISS CHIEVOUS]

Almost forgot! The lower-case iteration is, of course, at
http://www.geocities.com/a4248713/IExpand-O-GRAPHIC_5lc.html

And I finally cleaned up my DIV_CONCEPTS.html so the <hr> wasn't
traveling to China heh heh.

MC

 

[MISS CHIEVOUS]

Okay, my latest iterations (which include ROW3) are uploaded as
http://www.geocities.com/a4248713/ROW2_A.html
http://www.geocities.com/a4248713/ROW2_Alc.html
respectively and do validate.

I suspect the problems are happening in
- - - - - - - - - - -
#ROW2 {margin-bottom: 1em; overflow: hidden;}
#ROW2 .TEXTL {float: left; width: 30%;}
#ROW2 .TEXTL img {width: 100%;}
#ROW2 .TEXTL {float: left; width: 70%; background: #000; color: #fff;}
- - - - - - - - - - -

which I modified from dorayme's original

===========
#row2 {margin-bottom: 1em; overflow: hidden;}
#row2 .first {float: left; width: 30%;}
#row2 .first img {width: 100%;}
#row2 .second {float: left; width: 70%; background: #000; color:
#fff;}
===========

because the text box is not to be centered. You can see in ROW2_A
what happens; I also tried changing the orientation for the text box
to "float: right" (which basically threw the entire page lol).

MC

 

[MISS CHIEVOUS]

And here is my effort to build upon dorayme's fraction4:
http://www.geocities.com/a4248713/ROW2_B.html
http://www.geocities.com/a4248713/ROW2_Blc.html

Horizontally, of the two "B" looks good in FF; but the ROW1 green
images are thrown in both A and B when viewed in IEx (groan). I did
remove the <p> vertical alignment tag, as it had no effect in IEx or
FF.

MC

 

[MISS CHIEVOUS]

I perceive I've worn out my welcome here so I will move on and ask for
help elsewhere. Thank you again to Ben and dorayme for your excellent
advice.

MISS CHIEVOUS

 

[dorayme]

I perceive I've worn out my welcome here so I will move on and ask for
help elsewhere. Thank you again to Ben and dorayme for your excellent
advice.

MISS CHIEVOUS

I think you will find that is not *really* true, don't feel unwelcome!
Speaking for myself at least, I have just been busy. And also, got *a
bit uncomfortable* going down a road I don't quite believe in, namely
trying to design a preconceived and very detailed template that involves
images for a purpose I am not sure will be useful for more than one
single page (if that).

 

[MISS CHIEVOUS]

Thank you anyway dorayme. You've been an _enormous_ help -- you and
Ben, both.

MC