I've been playing with this for a few days now, and I cannot for the life of me get divs to line up the way I want.

www.u3programs.com

That table is a sloppy mess of code, I think we could all agree, and I would like to convert it to nice XHTML 1.0, while keeping the same "engraved" look to the table.

As it is now, It's basically just a frankenstein grade table.

I'm also kind of lost with the whole difference between classes and id's and using the # or .

I looked at the CSS post in the CSS forum and read up on it a bit, but I'm still pretty much lost on the subject.

Thanks in advance for any help anyone can offer me.

Start with a fixed width div, with a style rule taking margins and padding out. Put in the top panel. Then float the big block with the image left and put in the remaining blocks. They could even be spans; you really don't even need a ul. Clear the float. Then put in the bottom section and footer and close the div. Style each section pretty much the same as you did when they were table cells. Simple, no great mass of divs to contend with. I'd give you the code, but I wouldn't be doing you a favor. I had to learn by doing.

tim

dont want the code I'll have to play with that on the weekend.... its going to spawn more questions lol.

i only understand about half of what you said though.... i got lost after floating the big block left.

the biggest problem i was having when trying this on my own, was getting the the 3 rows to site beside the big block with the image, and when i did, i couldn't get it aligned right.

If you put everything in a single container div with a specified width, then specify the widths on the floated block and the ones going to the right of it, they will fall into place, so long as everything adds up to the width of the div containing it. So, you specify float:left; for the image block, then after the other rows put <div style="clear:both;"></div> to clear the float.

tim

I was using <li> for the 3 rows before, they were styled to look like table rows(found the css on another site) and they didnt sit right.

Should i not use <li> but instead use divs for those 3 rows also?

You can't use li without ul or ol. IE doesn't support the display:table, table-row or table-cell properties, so you'd have to float and clear for IE anyway. All you really need for this is to just use the document flow, so long as you specify the widths, and use spans, rather than use what would have to be three unordered lists displayed inline to work right. Doing it the way I'm describing, you only use one container div.

tim

Keep going you'll get the hang of it. I had never heard of CSS until I joined this forum (and that wasn't that long ago), I always used to use tables which looking back on it was very hard work

There are tons of free tutorials on the web to help make the transition from tables to CSS I have listed a couple below (I have no used them, I mainly used video tutorials from here http://www.sitepoint.com/videos/) and I also got loads of help from this forum on specific problems.

w3c CSS tutorial
http://www.w3.org/Style/CSS/

box model layout
http://www.builderau.com.au/program/...9269220,00.htm

CSS float tutorial
http://www.tizag.com/cssT/float.php

Hope these help.

Originally Posted by BigJohnny

I'm also kind of lost with the whole difference between classes and id's and using the # or .

Use a <tag id="identifier"> where tag is any appropriate HTML tag, when the style will only be applied once on the page.

The id tag may be used to refer to CSS #identifier {style: style;}

You may also reference a subsection of a page from another page by using a link pointing to an id: index.html#identifier

On index.html:
<h2 id="identifier">
This title will come up at the top your screen
</h2>

You may do both at once. Point to the id from another page and reference the css.

A class is used when you want to reference css more than once per page, for example, if you want to use some form of highlighting. Or if you want to style more than one individual paragraph.

Originally Posted by BigJohnny

I've been playing with this for a few days now, and I cannot for the life of me get divs to line up the way I want.

www.u3programs.com

That table is a sloppy mess of code, I think we could all agree, and I would like to convert it to nice XHTML 1.0, while keeping the same "engraved" look to the table.

As it is now, It's basically just a frankenstein grade table.

I'm also kind of lost with the whole difference between classes and id's and using the # or .

I looked at the CSS post in the CSS forum and read up on it a bit, but I'm still pretty much lost on the subject.

Thanks in advance for any help anyone can offer me.

I would advice you to work with tables only, becoz no matter how much time you spend on meddling with CSS and Divs, the structure which tables display cant be reached.. especially if you targeting cross browser viewers.

I have a worked a lot on divs but was never able to come up with an excellent table like structure to be displayed which works both in firefox as well as in IE..

please reply back if you happen to find compatibility of divs across different browsers.

I would advice you to work with tables only

...gag...
People should be banned for saying stuff like this.

I have not had any problems converting to CSS - advising someone to stay with tables only is bad advice. Spend the time and get to know CSS its much more versatile and can do anything tables can do (use tables for tabular layout though obviously)

Funny you should say working with tables only - the sites in your sig dont - and the site that does have some tables in it could be done with css but each to their own I suppose.