I'm attempting to float 5 buttons from left to right - html

Question

I'm trying to have these 5 images to line up left to right however they are stacking top to bottom.
This is my HTML code
<div style="backgroundColorButtons">
<img src="images/white01.jpg" alt= "White Background" width="236" height="35" type='button' value='White Background' onClick="javascript:changeBGC('#ffffff');return false"
onmouseover="this.src='images/white02.jpg';"
onmouseout="this.src='images/white01.jpg'"
onmousedown="this.src='images/white04.jpg'"
onmouseup="this.src='images/white01.jpg'" />
</div>
<div style="backgroundColorButtons">
<img src="images/black01.jpg" alt= "Black Background" width="236" height="35" type="button" value='Black Background' onClick="javascript:changeBGC('#000000');return false"
onmouseover="this.src='images/black02.jpg';"
onmouseout="this.src='images/black01.jpg'"
onmousedown="this.src='images/black04.jpg'"
onmouseup="this.src='images/black01.jpg'" />
</div>
<div style="backgroundColorButtons">
<img src="images/red01.jpg" alt= "Red Background" width="236" height="35" type='button' value='Red Background' onClick="javascript:changeBGC('#ff0000');return false"
onmouseover="this.src='images/red02.jpg';"
onmouseout="this.src='images/red01.jpg'"
onmousedown="this.src='images/red04.jpg'"
onmouseup="this.src='images/red01.jpg'" />
</div>
There are two more buttons with similar code
This is the CSS Code that I am using;
.backgroundColorButtons{
float: left;
}

Answer 1

Instead of style use class
<div class="backgroundColorButtons">
I've also noticed that the way you use JS to change states is pretty painful, both for you, somebody who will edit the code one day, and the user it self. On every event (till all images are cached by the browser) you request the server for a new image resulting in an unprofessional time gap / wait - for the new image to be loaded.
Avoid where possible (anywhere is possible) inline JavaScript.
Explore the sprite images technique.

Answer 2

In your div declaration you have invalid syntax:
<div style="backgroundColorButtons">
If you want to assign class backgroundColorButtons to a div, you need to change it to:
<div class="backgroundColorButtons">
<div style=""> is allowed. but is used only for defining inline style, like so:
<div style="float: left;">
You should also consider defining width for your floated elements.

Answer 3

#container
{display:table;width:100%;}
#row{display:table-row;}
.left{display:table-cell;padding:10px;}
the html
<div id="container">
<div id="row">
<div class="left">1st image</div>
<div class="left">2nd image</div>
<div class="left">3rd image</div>
</div>
</div>

Answer 4

try using class instead of style should work
In Example <div class="backgroundColorButtons">

Answer 5

try to use .class in place of style="backgroundColorButtons" and style="backgroundColorButtons" is not valid inline css. you can do one of the below
1. add style="float:left" in place of style="backgroundColorButtons"
or
2. Make class name as
<style>
.backgroundColorButtons{
float:left;
}
</style>
and remove style in div add class="backgroundColorButtons"