display:inline; float;left; Then for the parent div, white-space:nowrap;
Two DIV elements aligning side by side...
ugh, I hate tables - so hard to read/maintain. DIV's are easier when you know how.
Thats pretty much all I've got to add 
Tables aren't even as bad as their normal deployment makes them. If more people knew how to make use of colspan and rowspan, pages could've been positioned with a single table in many cases, instead of the nested upon nested tables that one often sees in older pages
shaneH wrote:But in the real world, each browser seems to have a different way of handling position, padding, borders, and margins.
Yes, it's "IE" and "everyone else". Oh, and googlebot renders it differently, too (specifically, non-visually, but who cares about non-visual representations of the page anyway?).
Much of the time yes, but not always. Sometimes it's IE and Opera that agree and Gecko is the odd man out.
True; but the vast majority of the time it's less grief to develop for Gecko or Opera and then whatever hacks are necessary to get things to work on IE6/7/Mac than the other way around. In fact the only time I've had trouble with Opera (when Firefox was used during the page layout process) was its bug in failing to load images that were styled as display:none. I should revisit that issue because it was a couple of builds ago, now.
Most developers say that, however I disagree. Well, I disagree with one proviso: if you developer for the other browsers bearing in mind what commands IE6 does not understand, then it'll work fine. Me, I develop on IE6 in standards compliant mode, and adjust for the others, and I rarely have problems.
It's possible that I'm not being quite fair; the more I think about my process the more I realise that I do quite a bit more than "just write a stylesheet and look at the output in my browser of choice"; there are a number of ancillary doodads that I use to fiddle with the page while I'm looking at it that aren't strictly part of Firefox. That means I can take a more approximate-and-refine approach than I would want to if each iteration involved more back-and-forth between applications (instead, it would be "try and do everything at once and then swear have to figure out what broke when it does"). So it might be a workflow and perception thing.
But I note the phrase "standards compliant" - that is of course a must.
I realize I'm a total primitive when it comes to this stuff, but I just use notepad and 3 browsers, IE6, FF2.0, and Opera 9. But I do the initial checking and work in maxthon, an IE shell. That's my main browser.
Hey, I'm the reactionary codger around here. My text editor of choice was built in 1999.
9 days later
Weedpacket wrote:My text editor of choice was built in 1999.
LOL
You aren't the only one. I have a newer one just haven't really had a good reason to switch to it.
Wow, I guess my posts got some discussion going.
I'm not going to go into length about all the replies. I will say that some of you missunderstood what I was saying and made several assumssions about how I was suggesting one could do what was originally asked about.
7 months later
Hi, I'm trying to make a videogame character profile page... hoping to get one on the left and one on the right and have that continue to the bottom of the page like this:
1 2
3 4
5 6
etc.
but am doing something wrong because they overlap instead of breaking to a new line each time:
<CENTER>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=45% ALIGN=left>
<P><B>Character 1</B>, soldier.</P>
<P><IMG SRC="images/character1.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 1 (<B>Character 1
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TABLE>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=45% ALIGN=right>
<P><B>Character 2</B>, soldier.</P>
<P><IMG SRC="images/character2.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 2 (<B>Character 2
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TABLE>
<BR>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=45% ALIGN=left>
<P><B>Character 3</B>, soldier.</P>
<P><IMG SRC="images/character3.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 3 (<B>Character 3
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TABLE>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=45% ALIGN=right>
<P><B>Character 4</B>, soldier.</P>
<P><IMG SRC="images/character4.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 4 (<B>Character 4
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TABLE>
</CENTER>
help?
Nevermind... played with the html a bit and got it working:
<CENTER>
<TABLE BORDER="1" WIDTH="500">
<TR>
<TD WIDTH=250>
<TABLE BORDER="1" WIDTH="250">
<TR>
<TD>
<P><B>Character 1</B>, soldier.</P>
<P><IMG SRC="images/character1.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 1 (<B>Character 1
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="250">
<TABLE BORDER="1">
<TR>
<TD WIDTH="250">
<P><B>Character 2</B>, soldier.</P>
<P><IMG SRC="images/character2.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 2 (<B>Character 2
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
<BR>
<CENTER>
<TABLE BORDER="1" WIDTH="500">
<TR>
<TD WIDTH=250>
<TABLE BORDER="1" WIDTH="250">
<TR>
<TD>
<P><B>Character 3</B>, soldier.</P>
<P><IMG SRC="images/character3.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 3 (<B>Character 3
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="250">
<TABLE BORDER="1">
<TR>
<TD WIDTH="250">
<P><B>Character 4</B>, soldier.</P>
<P><IMG SRC="images/character4.jpg" WIDTH=175 HEIGHT=200 ALIGN=left></P>
<P>Character 4 (<B>Character 4
</B>) test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test.</P>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
<BR>
Speaking of playing with the HTML, make sure you play around with this toy: http://validator.w3.org.
2 years later
dougal85;10807425 wrote:ugh, I hate tables - so hard to read/maintain. DIV's are easier when you know how.
Thats pretty much all I've got to add
I hope I don't provoke anyone if I end up bumping an old thread. I doubt that I'll get back to this forum again, but,
I've been using tables for years and I find tables a lot easier to read and maintain as layers doesnt make any sense at all. If more people learn how to use colspan cellpadding and cellspacing this wouldn't have been an issue and the majority would use tables instead. Tables are by far the easiest way of setting up a layout and implementing new layout to old.
So far, I'm stuck on this very same problem, on how to make layers stack next to eachother, but so far there's not been one single answer or explenation on how to do it, seem it being too difficult for people to manage and even read.
Once I use the float command on one layer, I have to add layers to EVERYTHING (e.g. add layers around my tables) or else my entire layout turns into a big steamy pile of poo. To be all honest, whenever I see a layer, or any of my colleges use a layer I run through the code and remake it to tables.
There is so much more useful one can do with tables simply because tables have been here the longest.
Much props to oldschool webdesigners who still use tables!
And props to those who doesn't use <p>
2 years later
I understand that Tables used to be the ONLY way to achieve a decent webpage layout. (i.e. header, left navigation, main section, footer) but seriously, are people still using tables for web layouts? I don't even think Dreamweaver is using them anymore and that program sucks!
If you use tables, say goodbye to margins. Padding only. If you want do an interesting layout, mess with positioning, tables can't really do it. Well they can, they can do just about any design, but it will end up being so much work and the code with be so confusing to look at.
It's like chopping down a tree with a hand axe vs. a chainsaw. Why bother using the hand axe.
Spend an hour and look at http://www.tizag.com. Boom, you've just saved yourself hours of coding time. The answer to the original posters question is yes, use two floated divs.
It seems like there are a lot of stubborn people on here. People who have gotten used to using tables and refuse to learn new techniques.
For those who say tables eliminate browser discrepencies, that's not really true. You will have so many more issues to contend with since tables don't accept most CSS tags. Besides, a well coded site should display nicely in all major browsers. If not, you coded it wrong. You are not a professional web designer. Go home and apply for another profession. I'm only singling out those of you who champion table layout. I bet you would argue the merits of animated gifs and iframes as well.
I mean really, tables? *facepalm
Hate to resurrect an old thread but there was just a lot of wrong information being spread.
Information being spread? I'm glad you finally stopped the viral situation of this thread...
One guy asked for help using a table MORE than two years ago. ONE guy - TWO years ago! And you have to resurrect a thread which is close to four years old for that.
Not knowing something doesn't mean you're not able to learn. But by your reasoning, noone should ever take up any profession, since they will make one or more misstakes along the road, which in your books means they've chosen the wrong profession.
But, while you're at it, I recommend that you let both youtube and facebook know that they should fire their coders responsible for replacing video embedding by object/element with iframe and facebook likebutton as iframe. And don't forget to pass your advice along to google as well. Just don't do it using gmail. Or should we assume you do not include iframes in your rant?
Also, when you send your help to those companies, may I advice that you do not use the same preschool language, as you did in this thread, or they may see it less as advice and more as patronizing. "I mean really, tables?"
Assuming you havn't allready drawn the same conclusion when it comes to "*facepalm", the same advice applies here.
Also, when you do resurrect threads for no good reason in the holy crusade to stop wrong information from being spread, please do your homework and don't introduce more incorrect information!
Tables should indeed be used in some situations. That's why they are still in the HTML 5 draft. Using them only for layout purposes is not their intended use though, and that should be avoided. But in case someone happens to see your erroneous post, I'd just like to save them from the disaster of being fed misinformation. Margins do work with tables, assuming you know how to apply margins with CSS and are able to write validating (x)html code.
Here's an example, using margins to position the table in the middle (left-to-right) of the page.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#t1
{
margin: auto;
border: 1px solid red;
}
body
{
width: 100%;
border: 1px solid black;
}
th, td
{
padding: 4px 6px;
}
</style>
</head>
<body>
<table id="t1">
<thead><tr><th> </th><th>A</th><th>B</th></tr></thead>
<tbody>
<tr>
<th>1</th>
<td>John</td>
<td>7</td>
</tr>
<tr>
<th>2</th>
<td>Jane</td>
<td>6</td>
</tr>
</tbody>
</table>
</body></html>
Your post was condecending and rude and I got angry for which there is no excuse, even though I believe there was no reason for your post. My apologies.
I may have just been smashing my head against the keyboard for a few minutes in anger over people who still use tables for laying out web pages.
I agree I was brash and overtly rude, my apologies. But the fact remains that tables should only be used when your dealing with tabular data. Period. That's what they are designed. Also, I was referring to table cells not the table itself with margins.
Also, iframes almost are never needed by the average coder. Great for Facebook, go them. In rare instances, people need gifs too. 99% of the time, not though.
We both agree that table layouts are bad. So there ya go. We're on even ground. ;o)