How can I have two DIV s on the same line , one aligned to the left and one aligned to the right without an HTML table?

Question

I want the votediv on the right, independent of the text size of the article with class name "note". what happens if I assign

<div class="votediv" style="right:0; position:relative">

on css?

<div class="opiniondiv">
        <article class="opinion"></article>
        <div class="opiniondetail">
          <article class="note"></article>
          <div class="votediv">
            <form method="POST">
              <button class="agreebutton" value="1">Agree</button>
              <button class="disagreebutton" value="0">Disagree</button>
            </form>
          </div>
        </div>
      </div>

also, I want to do it without using

display:table

Answer 1

For <div class="votediv" style="right:0"> to work you have to add position: absolute to the style. And after that you would probably want to add position: relative to div.opiniondiv .

Edit

And if you are to float the divs as others suggests here, please do not forget to clear or you will have a total mess.

http://www.positioniseverything.net/easyclearing.html

Answer 2

<style>
    .votediv{
       float: right;
       width: 50%;
    }

    .opiniondiv{  
       float: left;
       width: 50%;
    }
</style>

The 50% width is assuming they are both within the same parent container. They need to have a set width for this to work, and obviously, their combined widths must not be wider than their parent.

Answer 3

You can use float: left and float: right to float an element to those sides respectively.

<style type='text/css'>
    .votediv { float: right; }
    .opiniondiv { float: left; }
</style>

Working Example