HTML and CSS

Putting divs side by side

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Apr 2009

Posts: 15

Reputation: apgriffiths is an unknown quantity at this point

Solved Threads: 0

apgriffiths apgriffiths is offline

Offline

Newbie Poster

Putting divs side by side

-1

Oct 13th, 2009

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
        <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>
        <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

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

.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

•

Join Date: Apr 2009

Posts: 119

Reputation: JugglerDrummer is an unknown quantity at this point

Solved Threads: 15

JugglerDrummer JugglerDrummer is offline

Offline

Junior Poster

Oct 13th, 2009

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

92% of all statistics are made up on the spot.

If you found a post helpful, please click the "give XXX reputation" link, to show your appreciation to those who helped you. Thanks! :D

•

Join Date: Apr 2009

Posts: 15

Reputation: apgriffiths is an unknown quantity at this point

Solved Threads: 0

apgriffiths apgriffiths is offline

Offline

Newbie Poster

Oct 13th, 2009

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.

•

Join Date: Jan 2009

Posts: 100

Reputation: Zero13 is an unknown quantity at this point

Solved Threads: 16

Zero13

Offline

Junior Poster

Oct 14th, 2009

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:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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.

•

Join Date: Apr 2009

Posts: 15

Reputation: apgriffiths is an unknown quantity at this point

Solved Threads: 0

apgriffiths apgriffiths is offline

Offline

Newbie Poster

Oct 14th, 2009

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.