944,052 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Putting divs side by side
Ad:
Permalink
Oct 13th, 2009
-1

Putting divs side by side

Expand Post »
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
HTML and CSS Syntax (Toggle Plain Text)
  1.         <div id="pitchdiv" class="dropZoneContainer">
  2.             <div id="gk" class="wrapper">
  3.                 <div id="gk1" class="dropZone" />
  4.             </div>
  5.             <div id="def" class="wrapper">
  6.                 <div id="def1" class="dropZone" />
  7.                 <div id="def2" class="dropZone" />
  8.                 <div id="def3" class="dropZone" />
  9.                 <div id="def4" class="dropZone" />
  10.             </div>
  11.             <div id="mid" class="wrapper">
  12.                 <div id="mid1" class="dropZone" />
  13.                 <div id="mid2" class="dropZone" />
  14.                 <div id="mid3" class="dropZone" />
  15.                 <div id="mid4" class="dropZone" />
  16.             </div>
  17.             <div id="str" class="wrapper">
  18.                 <div id="str1" class="dropZone" />
  19.                 <div id="str2" class="dropZone" />
  20.             </div>
  21.         </div>
The CSS is
HTML and CSS Syntax (Toggle Plain Text)
  1. .wrapper
  2. {
  3. 	width:380px;
  4. 	height:148px;
  5. 	margin-bottom:1px;
  6. 	margin-top:1px;
  7. 	border:solid 1px black;	
  8. }
  9. .dropZone
  10. {        	
  11. 	background-color:Transparent;
  12. 	height:120px;
  13. 	width:80px;
  14. 	float:left;
  15. }
  16. .dropZoneContainer
  17. {
  18. 	background-image:url(./images/footballpitch2port.png);
  19. 	top:100px;
  20. 	left:600px;
  21. 	height:600px;
  22. 	width:382px;
  23. 	position:absolute;
  24. }

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
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
apgriffiths is offline Offline
15 posts
since Apr 2009
Permalink
Oct 13th, 2009
0
Re: Putting divs side by side
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
Reputation Points: 14
Solved Threads: 22
Junior Poster
JugglerDrummer is offline Offline
138 posts
since Apr 2009
Permalink
Oct 13th, 2009
0
Re: Putting divs side by side
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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
apgriffiths is offline Offline
15 posts
since Apr 2009
Permalink
Oct 14th, 2009
1
Re: Putting divs side by side
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:
HTML and CSS Syntax (Toggle Plain Text)
  1. CSS:
  2. .wrapper
  3. {
  4.       width:20%;
  5.       height:148px;
  6.       margin-bottom:1px;
  7.       margin-top:1px;
  8.       border:solid 1px black;
  9.      float:left;
  10.      background:red
  11. }
  12. .dropZone
  13. {
  14.       background: green;
  15.       height:120px;
  16.       width:80px;
  17.       float:left;
  18. }
  19. .dropZoneContainer
  20. {
  21.       background:blue;
  22.       height:600px;
  23.       width:37%;
  24.      float: left
  25. }
Sorry for my English skill and good luck to you.
Reputation Points: 120
Solved Threads: 133
Practically a Master Poster
Zero13 is offline Offline
620 posts
since Jan 2009
Permalink
Oct 14th, 2009
0
Re: Putting divs side by side
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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
apgriffiths is offline Offline
15 posts
since Apr 2009
Permalink
Oct 14th, 2009
0
Re: Putting divs side by side
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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
apgriffiths is offline Offline
15 posts
since Apr 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Extending the box model?
Next Thread in HTML and CSS Forum Timeline: IE problems with image allignment.





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC