Aligning DIVs.

[dtm32236]

Referring to the screenshot, how would you go about making this?

I know it would be simple with an image map, but i'd rather use divs...

I was thinking of giving it a set width, and use a bunch of floated divs... something like

<div style="width:500px;">
<div style="width:250px; float:left;">top left box</div>
<div style="width:250px; float:left;">top right box</div>
<div style="width:250px; clear:left; float:left;">second row left</div>
<div style="width:250px; float:left;">second row right</div>
...
</div>

but it seems like that's a 'ghetto' way of doing it, and it may get complicated.

Any ideas/suggestions?

Thanks a lot.

[apeace]

Well, this is a tough one! Great post.

I've attached a PNG file to help out a bit.

Clearly, there are some rows here. Those should be divs. I've outlined those in black boxes. In each row, you should have column divs. Those are in red boxes. The gray boxes should be p tags that are styled. Or, if you wanted to do one better, they could be divs with h1 tags and p tags for the content below the names. The arrows should be img tags with alt="" attributes.

Making sense? Let me know if you have more questions.

-Andrew Peace (http://www.andrewpeace.com)

[dtm32236]

hey Andrew,

there was no attached image...

thanks for the help though. if you can, attach the image here and i'll see what i can come up with during the week...

i'll get in touch with you during the week too (regarding the LincolnMiniature site).

Thanks for everything,
Dan

[apeace]

Whoa...okay, weird. I could have sworn I attached it. Let me try again.

Okay, there we go.

It's very rough (cause I just did it again quickly), but this should give you an idea for a good div layout.

Again, those gray boxes should probably just be styled paragraphs, and the divs should serve as row/columns. Make sure your image tags have alt="", or else the alt attribute value conveys some sort of information.

Peace!

[dtm32236]

oh, nice - i like the solution of using a series of paragraphs. that's something i wouldn't have thought of.

thanks a lot - i'll let you know how it works out (but I may not get to it till later on this week/next week)

[apeace]

Yeah, I use paragraphs a lot. It's so simple, but it makes so much sense.

A good way to figure out how you should lay out divs and p's is to simply imagine what the document should like like in text--as in no CSS. Code it that way, and then add divs and CSS in order to style it into whatever sort of table layout you want.

It's nice to see another person who does professional work and makes professional posts!