Member Avatar for David_

CSS based design vs. Table based design has been a debatable topic since long. Both the designs have their own set of advantages and disadvantages. CSS based design is however used by a majority of people today. CSS means cascading style sheets which enable us to split up the design and the content. There is a lesser need of codes in case of the CSS based design as compared to the table based designs.
There are various advantages of CSS based design. As the codes used are smaller in number it enables us to make downloads faster. This also helps the search engines in acquiring proper content from your websites which in turn leads to higher rankings. The ranking that the websites receive is of great importance for greater traffic and visitors.
Table based design makes use of greater number of codes which leads to formation of complicated patterns. This affects the ranking of the website. Here there is a mixture of less meaningful content due to the codes and your own original content. You can use CSS based design so that only meaningful content is displayed. You can also make easier modifications in CSS based design as compared to the table based design. The use of CSS based design is on the rise due to all these benefits.

any other suggestion

http://www.infysolutions.com

Feel free to reply to this thread and add to this list, it will be helpful for everyone!

  • 5 Contributors
  • 4 Replies
  • 439 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for jb1ker

David

You covered it all, no need to suggest anything I would say. Rather an article than a forum topic.

Grtz J

Member Avatar for MKala

I have used the following codes to build a layout for my website:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fa">

<!-- Meta information -->
<head>
<meta content="fa" http-equiv="Content-Language" />
<meta name="keywords" content="" />
<meta name="discription" content="" />
<meta name="author" content="" />
<title>
</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>

<!-- Page body -->
<body>

<div id="wrap">
	<div id="header">
		<div id="logo">
			<h1><a href="index.html" title="homepage"> 
Subject 
</a></h1>
		</div>	
	</div>
	<div id="content">
		<div id="menu">
		<br />
		</div>
		<div id="page00">
		<br />
		</div>
	</div>
	<div id="footer-pa">
	<div id="footer">
	</div>
	</div>
</div>
<body> 
</html>

And The CSS file used is this (style.css) :

body
{
	background: url("images/010.jpg") repeat;
	margin: 0;
	font-family: Tahoma;
}
#wrap
{
	background-color: #ffffff;
	width: 820px;
	padding: 10px 0;
	margin: 10px auto;
}
#header
{
	margin: 0 auto;
	width: 800px;
	height: 70px;
	background: #C0C0C0;
	border-bottom: 1px solid #000000;
}
#logo
{
	float: left;
	margin: 30px 0 0 30px;
	cursor: default;
}
#logo a
{
	color: #000000;
	text-decoration: none;
}
#content
{
	width: 800px;
	height: inherit;
	margin: 0 auto;
	clear: both;
}
#page00
{
	float: left;
	width: 600px;
	height: 100%;
	background: #DCE9F5;
	margin: auto;
}
#menu
{
	float: right;
	width: 200px;
	height: 100%; 
	background: gray;
	margin: auto;	
}
#footer-pa
{
	padding-top: 5px;
	clear: both;
}
#footer
{
	height: 40px;
	width: 800px;
	clear: both;
	margin: 0 auto;
	background: #C0C0C0;
}

I want the height of the right side column (id="menu") stretch down automatically, when the amount of content on the left side (id="page00") makes the "page00" div taller than the "menu" div and/or viceversa. I mean when I enter text and image in "page00" div, I want the height of "menu" div increase dynamically and/or viceversa. Please note that these two divs are inside the "content" div and all of the divs are wrapped into a "wrap" div.
I have the option to use tables for my purpose but I want to get it done via divs and css.

All of your suggestions, critics and solutions are welcome. But I will be most pleased if someone does the favour to me and gives me the solution to my problem.

Member Avatar for MidiMagic

It should not be considered a "vs" situation. Some sites need both.

The only thing "wrong" with using a table is that a reading program for the blind will report table positions.

If divs can't do the job, go back to a table.

The use of tables that the W3C says should really not be used is the use of tables to simulate margins and padding.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.