CSS same-line aligning

css user-interface alignment positioning
Mota picture Mota · Feb 8, 2009 · Viewed 32.4k times · Source

Is there an elegant way to align 3 elements left, center, and right on the same line?

Right now I'm using 3 <div>'s all with width:33%;float:left; and it's not working too well.

Answer

Johannes Weiss picture Johannes Weiss · Feb 8, 2009

that works for me:

<html>
  <head>
    <style>
      div.fl {
        float: left;
        width: 33%;
      }
      div.fr {
        float: right;
        width: 33%;
      }
    </style>
  </head>
  <body>
    <div class="fl">
      A
    </div>
    <div class="fl">
      B
    </div>
    <div class="fr">
      C
    </div>
  </body>
</html>

do you mean the same?

Related questions

Align HTML input fields by :

I have a HTML form like: <html> Name:<input type="text"/></br> Email Address:<input type="text"/></br> Description of the input value:<input type="text"/></br&…

Read More
How can I change the thickness of my <hr> tag

I want to change the thickness of my horizontal rule (<hr>)in CSS. I know it can be done in HTML like so - <hr size="10"> But I hear that this is deprecated as mentioned on …

Read More
iOS 7's blurred overlay effect using CSS?

It seems Apple's overlay is more than just a transparency. Any ideas on how to achieve this effect with CSS and possibly JS?

Read More