How to position two elements left and right aligned purely using CSS?

March 8, 2008 11:19 AM

HTML/CSS Design Filter! How do I position two elements in the same line but, one left aligned, and the other right aligned using just CSS?

I'm a bit of a n00b to pure-css design, so forgive my ignorance!

I'm trying to position the page title and the logo in the header of the page. I want the title to be left aligned, and the logo to be right-aligned. Oh, and I want to make it a flexible layout, i.e. I'd like the page to expand/contract as the browser window size changes.

I've been reading up a on purely css based design, but for the life of me I can't figure out how to accomplish this.

Here's the link to the page.

Also, any resources for learning more of this stuff are welcome.

posted by ogami to Technology (10 answers total)

Best answer: The key to this is nested divs and floating. I have taken your page and done a mockup here. You can click view source to see what's different from yours.

What I changed:

- Made the title and logo both their own div (instead of using span)

- Made the title float left and the logo float right

- Put in a "clear" div below the header. The clear is needed because when you use float, any other content that comes afterward will flow around the floated divs.
posted by sanitycheck at 11:31 AM on March 8, 2008

sanitycheck's got it. float float float!
posted by cowbellemoo at 11:37 AM on March 8, 2008

Response by poster: Cool. Thanks sanitycheck.

I tried floating the logo to the right, but that didn't help. I didn't try floating the title to the left at the same too.

Also, I'll remember the 'clear' trick.
posted by ogami at 12:13 PM on March 8, 2008

have you looked at Sanitycheck's example in IE? There's extra spacing between the header and the content.

I'm not saying this to be critical, but to point out how "pure CSS" works cross-browser. Which is to say, it really doesn't.

I know you didn't ask this exactly, but the answer is, in my opinion, "use a table."

There is probably a way to do this without the "clear" div, like substituting an invisible [hr] or something. I just don't see the point of going through all these contortions for the sake of trendiness, when tables work so well.
posted by drjimmy11 at 1:14 PM on March 8, 2008

My example above was a quick-and-dirty 60-second mockup. Yes, it sometimes takes a bit of tweaking to get CSS to render exactly the same on different browsers, but this doesn't mean you shouldn't use it.

CSS has clear usability advantages over tables because it effectively separates the content from the markup. This is especially important for accessiblity reasons (e.g. visually impaired users using screen readers).

Here is a (nor very recent) article on the subject:
http://www.sitepoint.com/article/tables-vs-css
posted by sanitycheck at 2:24 PM on March 8, 2008

Response by poster: One of primary reasons I want to stop using tables for layout is because it's such a PITA to maintain. The billions of nested tables are a huge headache to keep track of.

A purely CSS based design I guess is more pain up-front (atleast for someone who is not familiar with it), but I guess easier to maintain in the future.

But, from what I hear, all those IE-specific hacks are quite a big PITA too!
posted by ogami at 2:43 PM on March 8, 2008

Best answer: A second method of accomplishing the same thing: Linky. This method doesn't change your original HTML at all, and uses positioning rather than floats.

Here's what I did:

1. Explictly declared #header to be position:relative
2. Gave .logo a declaration of position:absolute and then set its top and right positioning to be 0.

This does what you expect - sets the position of the image to the top and the right respectively, but importantly, it does it in relation to its relatively-positioned container.

In other words, because I set the position of #header to relative, I can move objects around inside that container to my hearts content, and not worry about them shifting off into the ether, or disturbing the document flow after header is closed.

Oh, I tested that code in FF2, IE7 and IE6. Works just fine, and no hackage required.

Absolute positioning within a relative-positioned container is tricky to grasp at first, but man it's a powerful tool. One I use every day.
posted by Ridge at 4:38 PM on March 8, 2008

Oh, I didn't test in Safari. Should be fine though.
posted by Ridge at 4:39 PM on March 8, 2008

Resetting CSS goes a long way towards resolving cross-browser/cross-platform differences. If you code for Firefox and Safari first, you'll get most of the way there. IE 6 causes the most trouble, and you can use conditional comments to keep the IE 6 fixes in a separate style sheet.

Floatutorial is a step-by-step guide to building a website with floats.

Absolute positioning within a relative-positioned container is tricky to grasp at first, but man it's a powerful tool.

Making the Absolute, Relative is a good explanation.

You could also float nearly everything and not use clearing divs.

Advocating tables for layout over CSS in 2008 is silly. CSS has been a valid way to build layouts for years.
posted by kirkaracha at 6:48 PM on March 8, 2008

Response by poster: Thanks Ridge.

I guess some of the trouble I'm having with CSS stems from with the Perl-ish philosophy of "There Is More Than One Way To Do It", as opposed to the Python-ish "There Is One Way To Do It". I still have nightmares of that one Perl project I worked on. However, I rather like CSS - it doesn't feel so hackish, quite the opposite actually.

I think I'll go and check out those links kirkaracha suggested.

P.S.: I just found this - it looks pretty cool and useful.
posted by ogami at 7:26 PM on March 8, 2008