CSS - Css Vs. Tables For New Site Layouts?

Hello.

Currently my site is all CSS.

I know tables are terrible to some people but should I use a table for this portion of my site? Or should I wrap each member into a div then another dive for the image/postion and another div for name/description?

Basically its just for the team members photo and description.

It think I'll end up with a ton of divs so I think tables might be better. (unless there is an easy way to do it with limited amount of divs and CSS?)

my site uses php and mysql database

but the html has some nested tables on several pages,

is it worth me changing my code to implement using css and no tables?

whats everyones opinion on this?

is it just better to leave it in tables,

they are pretty messy i must say!
i have 3 tables nested,
and loads of php mysql code in there too

any advice appreciated,

Should I or should I not learn more about coding when I build my page using Dreamweaver anyways and it looks and functions fine.

I am stuck wit the issue of doc types in my pages which has prevented me to make a center middle design page and had to remove the doc type code on all my websites so that the page content will end up at centre middle.

The only solution I have been offered was to use CSS but I have so many old sites that converting the sites I have built to CSS would be too time consuming and not worth it.

Anyone have any other better ideas?

This is driving me absolutely insane.
The transition from table designs to css designs is a brutal one, in case no one is aware. Table designs seem so much easier, but I guess I might as well be compliant.

Here's my problem:
All I need to do is have a three column box that has a select box in the left column, then two images vertically aligned in the middle within the middle column, and a second select box in the right column.

This would be incredibly easy with tables seeing that all I would need is:
Code:

<table>
   <tr>
      <td align="left">
         <select>
            <option>Option</option>
         </select>
      </td>
      <td valign="middle" align="center">
         <img src="picture1.jpg"/><br/>
         <img src="picture1.jpg"/>
      </td>
      <td align="left">
         <select>
            <option>Option 2</option>
         </select>
      </td>
   </tr>
</table>

I'm assuming that since it's this easy to do with tables and everyone is opposed to using tables for design, there must be an easier way using divs and the like. Please enlighten me, someone!

I've been thinking about switching over to making table-less css layouts, but there's been a few things holding me back, as I'm not sure if they're possible.

Firstly, can you have two fixed width divs on the sides of a variable width div, which will stretch to fit the screen? Something like this is generally what I mean:

Code:

<div style="width: 50px; float: left;">left</div>
<div style="width: *; float: left;">middle</div>
<div style="width: 50px; float: left;">right</div>

Also, is there any way to make a div that has been placed to the right of another match the height of the the one to it's left? Basically, I want it to behave more like standard tables do in that every cell in a row is the same height. Is this possible?

Hi,

Am very new to CSS, and need some advice. Broadly speaking, how would I achieve this layout using purely CSS? Thanks in advance

http://forums.devshed.com/attachmen...tachmentid=4990

First off I am entirely new to using CSS for anything other than some link and scroll bar decorations.

Secondly, this code does not (currently) validate but I think I can resolve those issues, but before I go to the trouble of appeasing a (forum) guideline and making sure the code validates I have some questions that may or may not prevent me from using the code or CSS all together.

The code (template/stle sheet) I am using is from http://www.code-sucks.com/css%20layouts/css-3-column-layouts/
the top question I have now is:

How can I seperate elements within the "header" section of this format?
i.e. within the "header I would like to place a logo to the far left + a slogan and also place an advertising banner? normally I would do this with three or more table cells.

would it compromise the benefit of switching from mainly table oriented pages to CSS by including "some" tables within the CSS sections?

Thanks for any insights and sorry if I have crossed any lines with this query.

I think it would answer a lot of questions if we make a list of cross browser css layouts.

I am going to post all of my submissions via http://www.blendedcodes.com so everyone can see a live demo and change the code around live. Please post your submissions via blendedcodes.com or a similar site that lets visitors interact with the code. This is all about everyone learning the css layouts... I'll compile them all and post the final list when I close the thread.

Centered body with left and right columns
http://www.blendedcodes.com/DTrzZ6In

Table made of floating divs
http://www.blendedcodes.com/CFwtV3S1

I've got two pages, one created using tables for layout, and one using css .

With the text columns in the tables layout, as you can see, no matter how much text you put in either column, the grey-background container will be pushed down.

However, with the text columns in the css layout, I had to float the right column to the right in order to display the two columns together, and therefore, if you have more text in the right floated column, adding more or less text does not push down the height of the grey-background container.

Can anyone tell me how I can fix this while allowing for random amounts of text to be displayed in either column, in the layout?

I'm having an issue with a CSS layout I"m working on.
1.For some off reason the div element for my page footer appears to think its inside of the mbox div.
no matter what I have tried I can't get the pagebot div to the bottom of browser.
2. Width of 100% still leaves 30 or so px's on the right, any reason for this?
3. setting a min-height of 500 or so for mbox or innerbox divs has been ignored.
Code:

<html>
<head>
	<title>Untitled</title>
	<style>
	#container {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
	#pagetop{
		position: relative;
		top: 0px;
		background-color: #ADD8E6;
		width: 100%;
		height: 65px;
	}
	#pagebot {
		position: relative;
		background-color: #ADD8E6;
		height: 65px;
		clear: both;
	}
	#mbox {
		position: relative;
		border: 5px solid #000;
	}
	#innerbox {
		position: relative;
		left: 10px;
	}
	div{
		border: 1px solid red;
	}
	</style>
</head>
<body>
<div id="container">
	<div id="pagetop"></div>
	<div id="mbox">
		<div><img src='imgs/logo_tot_grey.jpg' width='280' height='95' alt='' border='0'></div>
		<div id="innerbox">
			<p>Test</p>
		</div
	</div>
	<div id="pagebot"></div>
</div>
</body>
</html>

I am looking for a CSS tutorial which teaches how to make a layout like this
layout
Basically a 3 column layout with boxes in the left and right columns
Thanks

Hi there,

I wanted to make buttons for my menu but I didn't want to use a lot of bandwidth so I decided to use Layouts and use the same image button over and over again! I made it in FrontPage with a great success but at the end I found out that the layout doesn't work in FireFox, the writing is all over the place in FireFox.

Here is the code:
Code:

<div id="logo" style="position:absolute; left:-1px; top:20px; width: 171px; height: 45px;">

<p align="center"><font face="Tahoma" size="2">TEST LAYOUT</font></div>
<p>
<img border="0" id="img1" src="../button22.jpg" height="30" width="150" alt=""></p>

If you apply it in IE it works, but if you apply it in Firefox it doesn't work.

Thanks in advance for your help and support.

Best Regards,
John

hey everyone, for years i have been making sites with tables for layouts. i have heard how this is old and a bad method as opposed to css. i do know the basic of css, like changing fonts, properties of buttons, changing link styles, hovering, etc. i was wondering if anyone could reccomend a site that does a good job explaining how to make a layout with css, basically that can replace tables.
i have googled and found some ok stuff, but i was wondering if anyone already knows of a helpful resource. i am not in a dire need of an answer here, just curious to expand my knowledge of css. thanks for your help, --c0ldshadow

Is it more common practice to place all div's within one div as seen he


Or to have all div's independent, as shown he