CSS instead of table

[chameleon81]

Hi,

I just decided to start to learn CSS today.

I was trying to learn by practice. My aim is to reproduce the upper part of this page http://www.screensteps.com/ where on left the side we have logo and right sight 4 identical rows.

With table it wont be a problem by using col span. I checked on the web what I can use in CSS instead of Table's col span. The only info I was able to find was to position the div parts correctly.

I did position the parts correctly and was able to replicate the site but I spent lots of time. ( first i didnt know what CSS was so I read , then I had to check for Table vs CSS articles etc )

But still, from my understanding for this type of job CSS takes more time than tables unless you have Dreamweaver or any other wygiwys ediyor.

Am I right?

 

[angelwatt]

It may take longer right now, but only because you're use to doing table layouts. Using CSS instead takes a different mindset, so you have to give things time to unlearn how you created layouts before. It'll take some time and practice, but eventually you'll find yourself putting together layouts in CSS just as fast as table layouts.

 

[chameleon81]

Yeap I realized that I have to forget the things I know .

My question is whether there is a different method in CSS to create sth like my example ?

 

[SrWebDeveloper]

Here is the mindset you need to have for CSS layouts, in my experience:

When you create or have to match a layout, remember div's by default span the entire width from margin to margin. Meaning, if you had two div's in your HTML, the second will display below the first, as there is no room to display it next to the first since the first extends to the far right margin. This concept is called "block level". All div's by default are block level. To change this behavior you use the "float" property which changes that container to inline (think colspan for TD's) and set it either left or right based on need. You did that for those 4 div's on the right, I am sure (if not, post your code, heh).

So I suggest you learn about floating, inline vs. block level and you'll be able to match any layout in CSS that you would do for a table. If you get into more complex grids and alignment issues, the next thing you learn is to set a parent container and start working with relative vs. absolute positioning using top/left/bottom/right to position divs. This is all about the "flow", i.e. what elements will be below/next to other elements based on how your div's are block level vs. inline.

Finally, think of all div's as containers, areas for content, if not used for alignment purposes as noted above.

That's really the big picture of how you "mentally" approach CSS layout design. In the end, this method is far easier than tables, less code, and much easier to control appearance because all styling and sizing is done via a stylesheet, not embedded styles in tabular HTML. This means more time for content, less time adjusting your layout. And, finally, it's very easy to create "skins" since content is clearly separated from style.

Hope you feel all warm and fuzzy now - you made the right choice!

-jim

 

[chameleon81]

Thanks for descriptive post. I'll check those subjects you mentioned .