How can I align and space elements in HTML?

easiest way is with border-less tables.

cleanest way is with CSS stylesheets, using a combination of padding, margin, and position.

have a read of http://www.w3schools.com for more on the CSS methods.

Hello Link :)

There are a few ways to do this. Before, in the olde years of web designnne, we used tables to hack together a position. I still resort to tables when I am desperate nowadays, but the best and proper way to do positioning is through divs and positioning them with CSS.

This site gives a great overview of the concept, so I won’t repeat it here.

Learn how the box model works is the first step. The next step is to fire Notepad up and test test test with simple test code like this.

Since some of the differences in browser errors in rendering, inconsistencies etc, has to do with different interpretations of the box model, be sure to test in the range of IEs (6, 7, and 8) as well as Firefox. With simple positioning, there should be no problems though.

This will likely be covered well in any beginner’s CSS book. I advise you to pick one up. Again, the best way to learn code is to DO code, so dig in and position those divs!

If you want to see how Fluther’s design works, save a copy of the page to your local machine and start gutting it out. Replace all the text with “blah blah blah”. Look at the css behind it. Change some colors to figure out where you are. Strip it down till you have the basic framework and cut all the bloat code from it, then learn from that. Nothing’s better than getting your hands messy with code cruft!

CSS is the best way.

You can either use a bunch if <div> for each element, and in the CSS file set each of those <div> for float:left;...or you can make a list of items, the navigation for instance and make the list inline….or make it block and float the list elements left

CSS divs
——————-
#divone{
float:left
}
#divtwo {
float:left
}
—————————-
CSS inline list

#nav ul{
margin:0;
padding:0
}
#nav li {
display:inline;
}

If you’re using Mozilla Firefox, then install Firebug and use the DOM inspector to tear apart this web page. When you click on an element, Firebug will show you all of the CSS rules that have been applied to it.

Thanks DYNAMICDUO and all the rest. I definitely am diving into CSS because it’s fun and it’s something I want to get good at. I’m trying to align things with positioning, but I’m not sure if I should be using the “relative” or the “absolute” variety. I’m trying to avoid tables because they say use CSS, so that’s what I’m doing. I guess what I’ll do is make a simple HTML file with only three or four elements and figure it out that way. Thanks again people.

-Link

@wenn I have a question: is the indentation important in CSS? I see you have everything neatly aligned to the left. I am trying to tweak my Tumblr.com site and wondering how to keep it working. I suppose the use of indentation is useful only as a visual guide?

@Link Thanks for the great question. I am trying to learn this stuff a bit on my own.

@bonus are you referring to the indentation of the CSS code itself? If so, that has no effect on the output of your site, you could write all your CSS in on long line and it would work jsut the same.

BUT clean code makes everything SOOOOOO much easier.

@wenn Yes. That is the exact answer I was looking for. Thank you. From what I have seen, I totally agree that cleaner is better.