4 div elements side by side inside one main div element

Question

I want to put 4 div elements, side by side eachother, into one main div element. I tried float:left, but the div elements were not inside the main div element; Instead they were to the left of the browser page. Is there a way of using float:left for the main element instead of the entire browser page? Or using an entirely different method to display them side by side inside the main div element.

CSS code:

#div1, #div2, #div3, #div4 {   
width: 125px;
height: 125px;
margin: 10px;
padding: 1px;
border: 1px solid black;
}
.maindiv {
background-color: #e5e4d7;
margin:10px;
border-radius:5px;
padding:20px;
}

HTML code:

<div class="main1">
<div id="div1" ondrop="drop(event, 'div1')" ondragover="allowDrop(event, 'div1')"></div>
<div id="div2" ondrop="drop(event, 'div2')" ondragover="allowDrop(event, 'div2')"></div>
<div id="div3" ondrop="drop(event, 'div3')" ondragover="allowDrop(event, 'div3')"></div>
<div id="div4" ondrop="drop(event, 'div4')" ondragover="allowDrop(event, 'div4')"></div>
</div>

The drag/drop is for javascript which I am still trying to figure out, so ignore that part since I'm only doing css right now. So far this works but the four div elements are stacked on eachother instead of side by side. Any help would be greatly appreciated. Thank you.

Answer 1

You just give the container div float: left; as well

JSFiddle