Putting divs side by side

[apgriffiths]

I am trying to create a kind of grid of divs but i cannot get it to work.
I am a newbie at this and still learning. I have been on many websites but still no luck.

My html is

<div id="pitchdiv" class="dropZoneContainer">
            <div id="gk" class="wrapper">
                <div id="gk1" class="dropZone" />
            </div>
            <div id="def" class="wrapper">
                <div id="def1" class="dropZone" />
                <div id="def2" class="dropZone" />
                <div id="def3" class="dropZone" />
                <div id="def4" class="dropZone" />
            </div>
            <div id="mid" class="wrapper">
                <div id="mid1" class="dropZone" />
                <div id="mid2" class="dropZone" />
                <div id="mid3" class="dropZone" />
                <div id="mid4" class="dropZone" />
            </div>
            <div id="str" class="wrapper">
                <div id="str1" class="dropZone" />
                <div id="str2" class="dropZone" />
            </div>
        </div>

The CSS is

.wrapper
{
	width:380px;
	height:148px;
	margin-bottom:1px;
	margin-top:1px;
	border:solid 1px black;	
}
.dropZone
{        	
	background-color:Transparent;
	height:120px;
	width:80px;
	float:left;
}
.dropZoneContainer
{
	background-image:url(./images/footballpitch2port.png);
	top:100px;
	left:600px;
	height:600px;
	width:382px;
	position:absolute;
}

When the page is rendered the divs are all over the place really. Im thinking of going back to a table but i would prefer a more flexible solution

[JugglerDrummer]

easy way to make them appear next to each other is give them a float: left and make sure they can fit next to each other comfortably. this should help :D

[apgriffiths]

Thanks for the reply.

there is a float:left on the .dropzone already and things arent rendering properly. Also there are 4 divs that should be displayed horizontally inline.

[ko ko]

You float div are the child of the main wrapper and it float in its parent. Not the wrapper and 'dropzoneContainer'. Also, wrapper and dropzoneContainer has still linebreak and they generate break line around them. So you must float them. Then, you give the wrapper to 380px width. There is 3 wrapper div and dropzoneContainer which has 382px width. So, there is no enough space to appear next to each. Try this:

CSS:
.wrapper
{
      width:20%;
      height:148px;
      margin-bottom:1px;
      margin-top:1px;
      border:solid 1px black;
     float:left;
     background:red
}
.dropZone
{
      background: green;
      height:120px;
      width:80px;
      float:left;
}
.dropZoneContainer
{
      background:blue;
      height:600px;
      width:37%;
     float: left
}

Sorry for my English skill and good luck to you.

[apgriffiths]

Thanks for your response.

I have input your code and its still not rendering correctly. The divs are still rendering inside each other. When i look at the divs in the visual studio ide it looks correct but when i view in browser (Both IE and FF) it is incorrect.
Thanks again.

[apgriffiths]

I have solved it. All i did was add a line of text to each div and it is all fine.

Thanks very much for your help on this.