homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

css page layout.

WebmasterWorld Senior Member 10+ Year Member

Msg#: 4219777 posted 12:26 pm on Oct 21, 2010 (gmt 0)

I have just jumped into page layout using css rather than html tables.

Am I going backwards by placing a table inside of a div tag?



WebmasterWorld Senior Member 5+ Year Member

Msg#: 4219777 posted 1:06 pm on Oct 21, 2010 (gmt 0)

Depends ;)
Good on you for making the change! Your question raises two issues for me:
  • Tables are the appropriate container for tabular data, so you are still "going forwards" if you are using a table for that sort of information. If the information does not lend itself to being arranged in a table you may have swayed backwards into using tables for layout.
  • Often coders making the change will develop "div-itis" at first - using lots and lots of divs instead of applying styles directly to the html element itself. It is usually possible to achieve what is desired without using an enclosing div, so I'd take a close look at your code and ask if the div has any real purpose.
All good in theory though - feel free to post some example code if it doesn't help.

WebmasterWorld Senior Member 10+ Year Member

Msg#: 4219777 posted 1:30 pm on Oct 21, 2010 (gmt 0)

yes I guess that table should'nt be there naughty me!

I am putting a lot of divs inside divs at the moment.

for example im going for fixed width and there is a main body with shadows left and right of that.

<div id="left"></div>
<div id="mid"> I will be placing all other div tags in here</div>

does that look about right as a starting point?
<div id="right"></div>


Msg#: 4219777 posted 4:21 pm on Oct 21, 2010 (gmt 0)

The original use of table tags was for tabular data layouts. People found out they could do web pages with them and the madness began. If a table inside a div is NOT for tabular data, then leave it out.

Tableless Web Design: [en.wikipedia.org...]
Why tables for layout is stupid: [hotdesign.com...]
How to convert manually your HTML tables to CSS: [table2css.com...]
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps


WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4219777 posted 3:19 pm on Oct 22, 2010 (gmt 0)

<div id="left"></div>
<div id="mid"> I will be placing all other div tags in here</div>

IMO, use your divs for generic containers, but before typing "<div...." yet again, think: is there a semantic element for this content?

<div id="left"></div>
<div id="mid">
<h1>The main page title</h1>

<p style="float: right; width: 150px; background: #e6e6e6; border: 1px solid #000;">I'm a sidebar or inset box that hangs to the right of this column, but I don't need to be a div. Of course you would put the styles in an external style sheet. As a <p>, the natural padding reduces the need for extra markup.</p>

<p>This is a paragraph that would flow around the floated one. </p>

<li>This is a list</li>
<li>This is a list</li>
<li>This is a list</li>

</div> <!-- end mid -->

You can style any element to emulate another, for example, lists don't have to be indented with bullets, but they can still be lists. If you don't like the spacing around paragraphs, style it. I'm working on a project now with horrors like this:

Some content that should be a paragraph <br><br>

In truth that it a dumbed down version, it's actually far worse, nested divs up to 20 levels deep . . . there is a point at which divitis is not curable, it's terminal. :-)

Same is true of span:

<span style="font-weight:bold; color:#ff0000;">Why not just use <strong> or <b> and add a strong/b class to the style sheet?</span>

I'm not a fan of "zero out everything"

* { margin:0; padding:0; }

but would rather go with the natural flow of document rendering and only apply styles as you need it. Comparing the two methods, it seems like the CSS gets far more complex when everything is zero'ed out.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved