Using CSS for layout purposes VS html tables layout

[Grootseun]

Aloha creatives

Do I primarily make use of CSS positioning and floating to create my page, OR do I need to combine CSS positioning/floating with html table layout (the "old" fashion way of accomplishing web layout)?

Just need to bridge this problem to ensure creating award winning designs

Thanx peeps

Highly appreciated

[RyanReese]

Hi Grootseun

To make the structure of your page you generally want floating (and then margins to exactly place it).

Absolute positioning/relative should only be used for dropdowns/small design segments of the page (aka rounded corners or some other small effect)

Absolute positioning should never be used as a page layout technique for columns because if you have a footer it will be a mess and the contnet will probably end up overflowing on top of hte footer. It's not suitable for dynamic environments .

If you go to pmob.co.uk where a regular here (Paul O'B) has posted many layouts, you will see every single one of them is done via floating and margins. It's by far the best layout technique and even though it has more bugs accompanied with it (as apposed to absolute positioning) it's still better (99% of all bugs have been documented and fixes are relatively easy to impliment, making this method the easiest)

HTML table layouts should nevner be used because table layouts are only to be used to display tabular data and as a result it would be unsemantic to use it as a design for a layout (even though sometimes tables would be the easiest, aka equal height columns, and other behaviors that are table specific)

Don't get me wrong, tables are completely fine if you have tabular data on the page (aka a data table of...oh..for example, all the speedcubers (rubiks cubes) that are competing in a competitiion)

It's your call whether it's tabular data. The key to making good pages is to not have divitis (overuse of divs) or any other "itis" . As long as you don't bloat your markup and write clean code (CSS hacks generally aren't needed because most bugs don't require hacks ) then you are sure to write an A-grade page )

As with any profession, you will get extremely good at it in time. Assuming you are a beginner (take no offense if you're not ), as you code a page you should try and refresh the page in a browser every segment (every peice) of hte page until you see exactly what everything is doing. You will learn to code bug fixes into your page as you are coding. But then again, that comes with experience. Give it time . Eventually you can code an entire pgae cross browser (99% of the time)

If you have any questions related to a certain thing happening on your page then just feel free to ask here . It'd be a good idea to start getting in the habit of visiting this forum frequently (CSS forum in particular) because we go over many issues and eventually you will start to notice the same problems comiong up. You will learn the fixes (in time) and you will get dramatically better because of it .

If you need any CSS reference help (a property/value etc) then visit the Sitepoint CSS reference

Hope that helps

[Stomme poes]

Hi Grootseun,

we have a search script on the forums. It's not the best thing since sliced bread, but it does mostly work (kinda).

http://www.sitepoint.com/forums/showthread.php?t=671993
http://www.sitepoint.com/forums/showthread.php?t=597136 (even though he meant display: table, most people answered like they thought it was divs vs tables)
http://www.sitepoint.com/forums/showthread.php?t=659600 It's not just "div" vs table
http://www.sitepoint.com/forums/showthread.php?t=171791 oooh, a fight to the death
http://www.sitepoint.com/forums/show....php?p=4427757
http://www.sitepoint.com/forums/showthread.php?t=647119

That was just the most relevant from the first page.

[Grootseun]

Briliant guys! Thanx for the feedback, it's excellent. Who needs a tutor if you've got sitepoint by your side. Love this forum more and more as I go along!

I've attached a basic column layout and I need your advice on how to prepare the CSS layout for it. I've got a basic idea how to, but not 100% confident as I'm still a beginner.

Just for interest sake, how can I achieve succesful CSS layout on the following template example: http://www.templatemonster.com/websi...tes/29034.html (even just basic layout ideas would be helpful)

Thanx once again / Dankie baie vir julle ondersteuning en raad.

[RyanReese]

However you think you would code it is probably correct (I just have a feeling )

I'd be inclined to make a <ul> <li> for the navigation list and just make it easy and have bottom padding on that to show the car

Then for the 3 checkmark boxes, just 3 <div>'s floated left with a width, styled like they show there..content..etc

Then just have 2 floated <div>'s to hold that 2column bit there..same idea

Same idea for the 3 column bit under that .

Then the footer (depending on your structure it will need clear:both)

Just go in sections of the page and code it how you think you would code it. Take it one step at a time and it will become very easy for you if you think about it

[AtSea webdesign]

Some good input here. The only time I'd use tables is for any tabular data coming from a database. Forms can be done fairly quickly as well. Much easier to control things that way and depending on your skillset and timeframe for your project.

Floats and margins are the way to go. When I made the transition from tables to css years ago I was frustrated at first. But as long as you remember the key ingredient...

If the layout is broken across browsers, check with clearing your floats.

You'll pick up on it quick. Less code, more control and better page speed.

[team1504]

My opinion is that,I would have to say using CSS as while it was taught that tables are the best method of page layout, because the pretty much universal support, margin and floating styling being applied to <div> tags in also now pretty much universally supported. And as Ryan said, using css floats and margins can provide a specific and exact position.


Sorry if I was not of any help, but I wish you the best of luck in your layout design. I learned that a good wireframing or layout is best to have at first the hard-way


Regards,
Team 1504

[felgall]

Once IE7 is dead it will not be such an issue as then you can always use the CSS table commands to do table layouts using display:table, display:table-row and display:table-cell so as to get layout tables without using the wrong HTML tags to achieve it.