Two column Div and Alignment, making a portion of a page look like tables Options

[UptonGirl]

If you look at this page: http://www.umass.edu/sts/ethics/online/Cas...hopal_Case.html

And scroll down to Interivewees:

You'll see where my problem begins.

I need to create divs for each of the people listed, text to left, image to right. I have created thumbnails and cropped the images to get more consistent sizes - but what I'd like is to have the images line up cleanly as they do in tables (and no, tables are not an option)

How do I create a two column div (which will be inside a page that already has page-layout divs for content, header and footer - but no columns) that will line up with the images right, and center? Creating a single div and flating the image to the right hasn't worked. The image does float right, but is out of aliment with the text.

This post has been edited by UptonGirl: Apr 9 2009, 01:06 AM

[Brian Chandler]

Since what you appear to have is tabular information (columns for description and picture, and one row for each person), in what way can tables be "not an option"??

[UptonGirl]

Since what you appear to have is tabular information (columns for description and picture, and one row for each person), in what way can tables be "not an option"??

I've been asked to put this information into a CSS format that can then be sued to load info from a database as info changes.

Frankly - I've never done anything for a database CMS before - nor have I seen them done in CSS - but those were the instructions.

[UptonGirl]

It isn't pretty - but it's a start --

http://althea.cs.umass.edu/TMurray/interviews.html

[Frederiek]

Create a div with a class name. Put all elements for each interviewee in such a div. And put the image at the start of your, in this case, blockquote element and float it right.

blockquote img {
float: right;
...
}

BTW, you haven't created thumbnails, but cropped the images in HTML. I'd say, try to make the images all the same size in your photo editing software. That will give a more clean look.

[UptonGirl]

Create a div with a class name. Put all elements for each interviewee in such a div. And put the image at the start of your, in this case, blockquote element and float it right.

blockquote img {
float: right;
...
}

BTW, you haven't created thumbnails, but cropped the images in HTML. I'd say, try to make the images all the same size in your photo editing software. That will give a more clean look.

Hi Frederiek,

The problem is - that's what I was doing that would not line up correctly. This is better aligned - and I'll see how it looks when I have more of the images in.

The images will be thumbnails when I'm done. I do have larger and higer resolution images to link to.

[Frederiek]

I hadn't seen you had posted a test page in the meantime. Sorry.

It seems to me you are getting somewhere with this now. No?

PS: BTW, I'm not familiar with Yahoo's CSS frameworks.

This post has been edited by Frederiek: Apr 9 2009, 04:01 AM

[Brian Chandler]

Since what you appear to have is tabular information (columns for description and picture, and one row for each person), in what way can tables be "not an option"??

I've been asked to put this information into a CSS format that can then be sued to load info from a database as info changes.

Frankly - I've never done anything for a database CMS before - nor have I seen them done in CSS - but those were the instructions.

The instructions don't make any sense on the face of it. First of all, I don't think even a lawyer would advise wasting money trying to sue a CSS format.

But anyway, this is completely backwards. The information needs to be stored in a database, then a program (PHP, Perl, whatever) needs to extract the required information and generate an appropriate html output, which will usually use CSS for some aspects of the formatting.

Why are you doing this for the requester? Are they paying you money? Or is this some sort of teaching exercise? Either way I would ask them to explain exactly what they mean.

[UptonGirl]

I get paid - I also get more info in a few hours.

[Brian Chandler]

In actual fact it doesn't look as though you need (or would be advised in the absence of erroneous dogma) to use a table: just a div for each entry, and float the photo right. But that doesn't change the basic point: whether or not you use a table element has simply nothing to do with whether the stuff comes out of a database.

Anyway, good luck with it...

[pandy]

The problem is - that's what I was doing that would not line up correctly. This is better aligned - and I'll see how it looks when I have more of the images in.

As we talked about earlier, to make it line up nicely you need to put the image in a DIV, give the DIVs a width that's wide enough for the largest image, align the images right within the DIV and float the DIV.

You shouldn't use BLOCKQUOTE when the text isn't a quotation. Use 'margin' for margins.

[UptonGirl]

The problem is - that's what I was doing that would not line up correctly. This is better aligned - and I'll see how it looks when I have more of the images in.

As we talked about earlier, to make it line up nicely you need to put the image in a DIV, give the DIVs a width that's wide enough for the largest image, align the images right within the DIV and float the DIV.

You shouldn't use BLOCKQUOTE when the text isn't a quotation. Use 'margin' for margins.

Siiiigh - okay, yes - I AM trainable, honest - just a little slow sometimes.

So, are you talking about NESTING the divs?

The "blockquote" is form the original text I believe. I did a lot of cut and past for the mock up. That's fixable.

Now I hear (as of an hour ago, one of the joys of telecommute is that they find it easy to get to you as long as you are on line. And, I always on line) "Here is a puzzle for you. On the pages with the po-up window for the Q&A with the audio content, what I really wanted was for that material to expand in place on the page rather than come up in a new window. I had a problem with the media player in that when I put several on the same HTML page pointing to different audio, it did not work. They all ended up bringing up the same audio file."

Well, that's another thread. I think I can manage this, but I want to be sure I'm clear on what they want. I'll know after this afternoon's meeting.

[UptonGirl]

But anyway, this is completely backwards. The information needs to be stored in a database, then a program (PHP, Perl, whatever) needs to extract the required information and generate an appropriate html output, which will usually use CSS for some aspects of the formatting.

Oh yes - my Mother would have called it "Back-@$$-Wards."

Nevertheless, the people with the power and the money have their database, and their data. They want me to make something pretty to put it in.

[pandy]

Yes, a nested DIV. If I get this right now...

CODE

<div class="interview">
<div class="photo" style="width: 300px; float: right; text-align:right">
<img src="photo.jpg width="" height="" alt="">
</div>
<p>Blah blah.../p>
</div>

You may need to clear the floats also.

BLOCKQUOTE isn't only wrong, it's also stupid to use it for layout reasons. As with everything else, browsers style it differently. Opera used to upset people by doing it different than IE and Netscape. There's nothing that guarantees that margins will be used at all. Some browser could, maybe by a user setting, choose to style them in red italic. So this ain't nitpicking.