Having trouble creating a color palette - html

Question

For my project, I'm creating an app that allows users to paint pictures.
I managed to create the canvas and paint brush, and already know how to work the Javascript and Jquery.
The only problem I'm having is with creating the color palette.
HTML
<div id = "colors">
<div style="background: #990000;"></div>
<div style="background: #CC0000;"></div>
<div style="background: #CC3300;"></div>
<div style="background: #FFCC00;"></div>
<div style="background: #FFFF00;"></div>
<div style="background: #CCFF00;"></div>
<div style="background: #66FF00;"></div>
<div style="background: #003300;"></div>
<div style="background: #33FFCC;"></div>
<div style="background: #3300CC;"></div>
<div style="background: #660033;"></div>
<div style="background: #660066;"></div>
<div style="background: #000000;"></div>
<div style="background: #ffffff;"></div>
</div>
application.css
#colors {
width: 180px;
height: 30px;
}
I created a fiddle
http://jsfiddle.net/fqfbprd7/1/
If I add some text to the div, like I did in the fiddle, I see the colors rendered, but they are all on their separate line. Similar to paint, this should be a color selection box, where there are 7 colors per line. Just the colors though, and no text.
I even set the width and height attributes for my colors div, to render a color box.

Answer 1

Here the updated fiddle:
http://jsfiddle.net/fqfbprd7/2/
#colors div {
width: 25px;
height: 30px;
float: left;
}

Answer 2

Target the DIV's inside #colors and use position property value of inline-block to get them to display next to eahch other.
#colors div {
display: inline-block;
}
#colors {
width: 180px;
height: 30px;
}
#colors div {
display: inline-block;
}
<div id ="colors">
<div style="background: #990000">A</div>
<div style="background: #CC0000">B</div>
<div style="background: #CC3300">C</div>
<div style="background: #FFCC00">D</div>
<div style="background: #FFFF00">E</div>
<div style="background: #CCFF00">F</div>
<div style="background: #66FF00">G</div>
<div style="background: #003300">H</div>
<div style="background: #33FFCC">I</div>
<div style="background: #3300CC">J</div>
<div style="background: #660033">K</div>
<div style="background: #660066">L</div>
<div style="background: #000000">M</div>
<div style="background: #ffffff">N</div>
</div>