Welcome to the MacNN Forums.

0157988944 · Apr 18, 2009, 03:49 PM

How do I get divs to stay below a variable height div no matter what?

0157988944 · Apr 18, 2009, 03:54 PM

Well, nevermind this one, but doesnt anyone have an answer for why DIVs are so much more difficult in certain ways than tables? (vertical alignment, I'm looking at you.)

Doofy · Apr 18, 2009, 04:08 PM

I still use tables. Sometimes old tech is best.

0157988944 · Apr 18, 2009, 04:13 PM

They make more sense and are easier to deal with but the arbitrary decision that they suck has apparently turned into a standard. I've yet to find an explanation of why they're so bad.

besson3c · Apr 18, 2009, 04:14 PM

We will need some context and a look at your code. Do you understand the difference between absolute and relative positioning?

Tables can be useful, but they can also be a complete PITA when used for layout. You should definitely master CSS positioning.

0157988944 · Apr 18, 2009, 04:16 PM

I got the answer, I was floating the main content, so I needed to put in a "clear: both."

Doofy · Apr 18, 2009, 04:20 PM

IIRC tables are more difficult for alternative readers (Lynx, voice synths, braille translators, etc.) to deal with and the use of nested tables is supposed to slow browser rendering down, but aside from that I think it's just geek peer pressure. Which I ignore, hence continuing to use them - I just make sure they aren't nested.

While I think about it, there's probably some pressure from the people who run a maxxed browser on widescreen monitors for the text to fill their page width, but as far as I can tell these folks are idiots who don't understand how line-length affects readability.

Chuckit · Apr 18, 2009, 04:24 PM

Originally Posted by adamfishercox

Well, nevermind this one, but doesnt anyone have an answer for why DIVs are so much more difficult in certain ways than tables? (vertical alignment, I'm looking at you.)

The same reason stencils do certain letterforms better than hand-painting.

To be honest, I feel like CSS is kind of poorly designed. There are a lot of common cases that are surprisingly difficult to figure out on your own. I still prefer it to table layouts, but I feel like it could be so much better if we were able to just scrap the whole thing and rebuild it based on what Web designers have learned over the past decade.

Chuckit · Apr 18, 2009, 04:29 PM

Originally Posted by Doofy

IIRC tables are more difficult for alternative readers (Lynx, voice synths, braille translators, etc.) to deal with and the use of nested tables is supposed to slow browser rendering down, but aside from that I think it's just geek peer pressure. Which I ignore, hence continuing to use them - I just make sure they aren't nested.

While I think about it, there's probably some pressure from the people who run a maxxed browser on widescreen monitors for the text to fill their page width, but as far as I can tell these folks are idiots who don't understand how line-length affects readability.

It's not just geek pressure. A well-written page is a lot easier to come in afterwards and edit than one with horrible markup. Of course, some people make layouts even worse with divs than they would be with tables, but divs at least make it possible to do a good, easily maintainable page.

besson3c · Apr 18, 2009, 04:30 PM

Tables have different properties which makes them appropriate in some situations, not appropriate in others. The primary one in my mind is the difficulty of micromanaging the dimensions of table cells and rows when other content in the table "competes" for this space.

CSS positioning allows the developer to be far more precise, although there is a learning curve in some cases.

Tables are also a PITA to use with JS toolkits such as Prototype and Scriptaculous (e.g. applying an effect to a row requires Effect.multiple and/or multiple calls for each cell). If this content is going to be altered by JS/AJAX, you are better off using CSS techniques.

Doofy · Apr 18, 2009, 04:33 PM

Originally Posted by Chuckit

It's not just geek pressure. A well-written page is a lot easier to come in afterwards and edit than one with horrible markup.

I forgot about that (since my markup is lickable and thus extremely easy to edit after the fact).

soma137 · Apr 20, 2009, 09:11 PM

to me....coming from an art background with the photoshop and quarkstyle apps ive used... html/css was a pain at first. well...its like this...
you have boxes that you put stuff in right? just like indesign and quark you want pics and text and maybe some layer action (text on pics). so you have some rules for those boxes to attain this feat (rules meaning code requirements to make them act like a predictable box). you need (roughly)...<div id="nameofbox"> to link to your css which should say??...height and width (when needed), float left (pretty much always for predictable left to right top to bottom order or stacking of div boxes), display inline (to fix internet explorer margins), and if you want text over pic?...you put a background image in there. then...you stick another div box inside that div box and you stick text in it....with similar css settings AND probably lots of...margins, text stylings and whatnot. its really quite simple after you find some consistency. you have super lean html this way...tables are dead, leave them behind forever...please. terrible. divs are great...you just need all the b.s. to plug into each box (what i said above)...then they become just tools and materials to throw up a web page....and not some shackles towards creating what should be in the beginning and the end...a well designed page that has nothing to do with what it took to make it!!!(code...csshtml..java...fireworks...photoshop ...dreamweaver....ftp....blahblahblah). its a beautiful page on the web meant to communicate some important information....and if your originally a coder...maybe rank high on google which is the other part to figure out (and less subjective). ask me question if ya like (if you have a prob) and ill try and answer

shifuimam · Apr 21, 2009, 01:42 AM

Originally Posted by adamfishercox

Well, nevermind this one, but doesnt anyone have an answer for why DIVs are so much more difficult in certain ways than tables? (vertical alignment, I'm looking at you.)

Because DIVs are styled with CSS, whereas tables use HTML to do all the positioning.

Different browsers render CSS differently, which means that having some semblance of a standard is difficult.

Not to mention that CSS wasn't originally developed to be used for positioning (I don't think so, at any rate).

Did clear:both fix your original problem?

soma137 · Apr 22, 2009, 02:17 PM

your div boxes are overlapping because you dont have float left....btw. your not telling them what to do. its chaos....

@pplejaxkz · Apr 22, 2009, 11:43 PM

My professor was really "div" heavy. We touched on tables briefly, but divs were pushed on us. So for the most part I've only used divs and I don't have too much of a problem as of now. Though I should try a couple layouts only using tables as well.

Chuckit · 12:06 AM

Originally Posted by @pplejaxkz

My professor was really "div" heavy. We touched on tables briefly, but divs were pushed on us. So for the most part I've only used divs and I don't have too much of a problem as of now. Though I should try a couple layouts only using tables as well.

Tables are for tabular data, not layouts. That's why teachers don't teach table layouts.

Of course, there are a lot of divtards out there who way overuse divs. Seriously, the Web is full of <div class="header">. Not only is it bad markup, it's like anti-SEO.

soma137 · Apr 23, 2009, 04:53 PM

i have heard this idea tossed around before (divs are bad seo)...well, this is usually accompanied by little or no evidence. but...of course it is difficult to prove one way or another because seo is all based on the unknown google algo right. you can run tests...sure, and you can gather empirical data (stats)...but in the end?...there are so many other seo factors that help result in that data...and some factors cannot be COMPLETELY controlled. so...i theorize that google favors standards and validated code. standards (WC3) such as...less code is good --> css based layouts, faster page loads (html code / content ratio) tables for data, logical and user friendly page layout, good page flow (seo important items towards the top of the html). so, i have to conclude that "divs are bad for seo" is merely one of a million "theories" being tossed around with no real evidence one way or the other. i personally...i am...a divtard. i overuse them and need to learn to make a nice design (according to my conceptuals outside of the programming world)...without using so many divs. but, i make very SEO aggressive websites that place top 5 in really aggressive industries with highbid keywords ($7-$12 a click)...so im doing something right. and...my sites are infinitely more aesthetically pleasing than any table built site.

Chuckit · Apr 23, 2009, 05:12 PM

You're doing SEO and you never use an <h1> tag? For reals?

soma137 · Apr 24, 2009, 03:13 PM

what?...never use an h1 tag? who said that? i dont remember saying that...and i immediately did a search for "h1" on this page...and your the only one to mention it chuckit. you dreamin the purple chicken or what?

uhh...kinda hard to optimize a site without htags...but lots of people do. i personally find it necessary to use them. but do a google search for most anything and you will find top 10 sites that are archaic old and decrepit tabled sites with little or no useful content ugly sites with no real apparent optimization. my theory is they are very old sites on the same dns with good backlinks.

but...isnt this a thread about div tags and how to construct a webpage with some semblance of control and sanity? more specifically....vertical alignment of div tags?

#body1 {
display: inline;
float: left;
height: 333px;
width: 333px; }

Chuckit · Apr 24, 2009, 03:46 PM

Originally Posted by soma137

what?...never use an h1 tag? who said that? i dont remember saying that...and i immediately did a search for "h1" on this page...and your the only one to mention it chuckit.

Reread the post that you replied to and you'll see I was talking about using the div tag to replace an h# tag. Lots of people use divs (and possibly spans) for absolutely everything, even when there are other tags that are obviously more appropriate.

Originally Posted by soma137

uhh...kinda hard to optimize a site without htags...but lots of people do. i personally find it necessary to use them. but do a google search for most anything and you will find top 10 sites that are archaic old and decrepit tabled sites with little or no useful content ugly sites with no real apparent optimization. my theory is they are very old sites on the same dns with good backlinks.

Uh, yeah. That's not on-page SEO, that's just getting lots of link juice.

soma137 · Apr 24, 2009, 09:56 PM

well...sorry about that...i misunderstood. and maybe i am still misunderstanding you because...
using <div class="header"> isnt bad seo. it probably hasnt any repercussions on your search placement at all. it is actually the "exclusion"....of htags that is bad seo. people reading this thread could misunderstand that.

also, aside from the tons of link juice (and other off page seo)....it does strike me as odd sometimes that REAAAALLY simple pages with hardly any content and crappy tables rank pretty well. right? do you come across this?

soma137 · Apr 24, 2009, 10:00 PM

and hey...im not trying to ruffle feathers with anyone. and im sure....like myself, you are just trying to tell it like it is, like you see it. ive been reading this site everyday for the better part of 5 years or so....great site. never had any real reason to post until now. did testudo die? where HE AT !!?!?!?!