Div is not floating left

I'm still relatively new to html and css, and I'm not able to figure this out. I have three divs with some text and I want them to be next to each other. I set them to float: left but they are not doing so. Here is my html:

    <div class = "threethings">
        <div><span>Style</span>
            <br>
            <p>Lorem ipsum dolor sit amet, ius te ullum indoctum, sanctus consequat eum te. Nemore recteque necessitatibus et eos.</p>
        </div>
        <div><span>Style</span>
            <br><p>Lorem ipsum dolor sit amet, ius te ullum indoctum, sanctus consequat eum te. Nemore recteque necessitatibus et eos.</p>
        </div>
        <div><span>Style</span>
            <br><p>Lorem ipsum dolor sit amet, ius te ullum indoctum, sanctus consequat eum te. Nemore recteque necessitatibus et eos.</p>
        </div>
    </div>

And here is the css

    .threethings {
            width : 20%;
        }
        .threethings div {
            text-align: center;
            position: relative;
            float : left;
        }