General Question

Link's avatar

How can I align and space elements in HTML?

Asked by Link (327points) June 1st, 2009

How can I get elements aligned next to each other in HTML. I would like to align things to my liking, but I’m not sure how. For example, on this page, instead of everthing going from top to bottom, there are elements aligned side by side with each other. How is this accomplished? All the help you can give me for this one guys. Thanks.


Observing members: 0 Composing members: 0

8 Answers

MrItty's avatar

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 for more on the CSS methods.

dynamicduo's avatar

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!

wenn's avatar

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
#divtwo {
CSS inline list

#nav ul{
#nav li {

noyesa's avatar

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.

Link's avatar

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.


bonus's avatar

@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 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.

wenn's avatar

@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.

bonus's avatar

@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.

Answer this question




to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther