how to always keep two divs side by side

Question

I have two divs floating left. I dont really want to use position absolute though, is there another way to keep the side by side without using position absolute? or is this the only way?

<div class="moreinfo" id="darkgray">
            <p>
                Today, hate speech continues to profilerate throughout the Internet, normalized in the form of YouTube comments, animated GIFs, and tweets. Online anonymity affords users a sense of security that fosters a culture of cruelty and bigotry. Our goal is to create a conversation about the consequences of hateful speech that rethinks how we communicate online. Social media is full of positive potential; we can tap into it by holding each other accountable.
            </p>
        </div>
        <div class="moreinfo" id="lightgray">
            <h2>
                "WE NEED TO TEACH OUR CHILDREN NOT TO STAND SILENTLY BY WHILE OTHERS ARE BEING TORMENTED. IN THE END, THEY WILL BE SAFER ONLINE &amp; OFFLINE."
                <a href="#">READ ARTICLE BY WIRED SAFETY</a>
            </h2>
        </div>
        <div class="clear"></div>

css

.moreinfo{
    width:715px;
    height:250px;
    float:left;
    color:white;
}

Answer 1

You can use display: inline-block to have them side by side.

Here is an example: http://jsfiddle.net/2sZCb/

.moreinfo {
  display: inline-block;
} 

Here is a good article on the same issue you're having: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Answer 2

the best way i noticed was to use percent 50% for the width of both