How can I layout my pages using css and not html tables?

How can I layout my pages using css and not html tables?
cbruneAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
Depend on what you want to do layout wise.

What you are asking is like asking how to build a building.

You need some idea of design to start.


Cd&
LZ1Commented:
In addition to Cd&:

You should learn semantic HTML & CSS first.  Here's a few resources:
http://htmldog.com/guides/cssbeginner/
http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/
http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/

If you do not want to learn HTML/CSS standards and best practices, then you should hire someone who already knows.
Gurvinder Pal SinghCommented:
something like this

<div style="clear:both;height:20px;">
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
</div>
<div style="clear:both;height:20px;">
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
</div>
<div style="clear:both;height:20px;">
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
    <div style="width:20px;float:left">Col1</div>
</div>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

cbruneAuthor Commented:
sorry i meant div tags
Gurvinder Pal SinghCommented:
My solution has div tags only :)

did you got any idea about the solution now?
COBOLdinosaurCommented:
So you go from a table to all divs.  That is no improvement.  There are a whole range of tags, for containers, wrappers, style carriers, semantic support and specialize presentation.

All divs is no better than a table but I guess it moves you from the 20th century to about 2004, so some progress is better than none.


Cd&
Ben McNellyCommented:
As COBOLdinosaur said, for detailed help we need more detailed questions. From what we can assume, you are used to using tables to build structured web pages, and you would like to move towards a more modern solution.

Depending on your situation, it may be helpful to be even more forward thinking and design with HTML5 and CSS3 in mind.

here is a link to a simple overview and guide: http://www.dave-woods.co.uk/index.php/html5-tutorial-getting-started/

While css/divs are more advanced than tables and offer greater flexibility and better standards support, HTML5 is even the next step forward. However, the same principles are used.

The end result is that you are using the html on your page and content holders or structure if you will. Then you use CSS to do the positioning and styling.
COBOLdinosaurCommented:
Then you use CSS to do the positioning and styling.


AND...

The semantics necessary to give modern level support to accessibility.  The importance of correctly using newer tags like aside, article, section and nav, do part of the job, but using the power of the new input types makes forms much more user friendly.

Cd&
jayhawksCommented:
CSS3 has a multi-column layout feature (text flows like in newspaper columns). Not yet supported in IE but that's coming. You can read about the standard on the W3C website.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.