2 divs side by side - sort of newbie question

So I am trying to get 2 divs to be side by side and display the background colour I have used. I have played around with it for the past 3 hours and do not seem to be getting nowhere. Grrr.

My CSS looks like the following:

wrapper {

 width: auto; margin: 0 auto; position: relative; 

}

leftcolumn {

 width: 2.5%; font-size: 25px; font-weight: bold; text-align: center; background-color: #d8d8ff; padding: 0; border: none; margin: auto; display: block; 

}

rightcolumn {

 width: 2.5%; font-size: 25px; font-weight: bold; text-align: center; background-color: #d8d8ff; padding: 0; border: none; margin: auto; display: block; float: left; 

}

And my code looks like the following:

<div id="wrapper">

<div id="leftcolumn"><a href="musical-b.html"><span>B</span></a></div>

<div id="rightcolumn"><a href="musical-b.html"><span>B</span></a></div>

</div>

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted December 20, 2015 at 04:06PM by shinytrina http://ift.tt/1IhNMfK