Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy DIV isn't going where it should be

    This is probably a problem with a simple answer that I've overlooked, but I can't seem to find it, and this website is due tomorrow! This left DIV should be right next to the other, with only 25px of space in between the two, but it sits to the very left instead, despite a container width of 780px. Can anyone spot what may be wrong?



    html:

    Code:
    	
    	<!-- CATERING RIGHT --!>	
    		<div id="cateringRight">
    		
    			<div id="sample">
    		
    				<div id="sampleTitle">
    				</div>
    	
    				<div id="sampleText">
    			
    					<p><i>Cocktail Hour:</i><br />
     					Pre-mixed Mai Tai's, Virgin Margarita's
    					Kona Beer Kegs<br />
    					Lumpia Appitizers</p>
    
    					<p><i>Dinner Buffet</i><br />
    					Halekulani Champagne Fruit Salad<br />
    					Macadamia Caesar Salad<br />
    					Island Macaroni Salad<br />
    					Kalua Pig<br />
    					Flaken Cut Kihei Short Ribs<br />
    					Vegetarian Yakisoba Noodles<br />
    					Spicy Grilled Korean Chicken<br />
    					Macadamia Nut Crusted Baked Mahi Mahi<br />
    					White Rice</p>
    			
    				</div>
    	
    			</div>
    			
    			<div id="inquire">
    		
    				<div id="inquireTitle">
    				</div>
    	
    				<div id="inquireText">
    			
    					<form id="inquireForm">
    					
    				
    					<p><input type="text" name="firstName" value="Name" size="25" </></p>
    			
    					<p><input type="text" name="email" value="Email" size="25"</></p>
    					
    					<p><input type="text" name="phone" value="Phone" size="25"</></p>
    					
    					<p><input type="text" name="city" value="City" size="25"</></p>
    					
    					<p>What type of event would you like catered?<br />
    					<select name="event">
    						<option value="">---</option>
    						<option value="wedding">Wedding</option>
    						<option value="babyShower">Baby Shower</option>
    						<option value="party">Party</option>
    						<option value="corporate">Corporate</option>
    						<option value="banquet">Banquet</option>
    						<option value="outdoor">Outdoor</option>
    						<option value="other">Other</option>
    					</select>
    					</p>
    					
    					<p>Are you interested in coming in for a tasting?<br />
    					<input type="radio" name="tasting" value="yes" checked /> Yes
    					<input type="radio" name="tasting" value="no" /> No
    					</p>
    					
    					<p>How may we contact you to discuss your event? <br />
    					<input type="checkbox" name="contact" value="phone" /> Phone<br />
    					<input type="checkbox" name="contact" value="email" /> Email<br />
    					</p>
    					
    					<p>Please include any additional information here. <br />
    						<textarea></textarea></p>
    						
    					<input type="submit" value="Mahalo!" />
    					
    					</form>
    				
    				</div>
    	
    			</div>
    	
    			</div>
    	
    		</div>
    
    <!-- CATERING LEFT --!>	
    		<div id="cateringLeft">
    		
    			<div id="catering">
    		
    				<div id="cateringTitle">
    				</div>
    	
    				<div id="cateringText">
    			
    					<p>Magic occurs when the right elements are in place. Bamboo Grove Hawaiian Grille specializes in gathering these elements for your dining pleasure. We offer the best in homestyle island cuisine with flavors so true, so authentically delicious, you'll rediscover the romance of the islands &mdash; even if you've never been there.</p>
    
    					<p>Big or small, we will help you organize your event. Fill out the form below to request more information, or give us a call. Think about not only how many people, but what kind of eaters are your guest?  Big meat eaters, vegetarians, small appitites, lots of kids? Our restaurant is also available to host your event. Regardless of location, we can handle rentals, music, servers, bartenders, photographers, DJ service, lighting, tents, etc.</p>
    
    					<p>If you are unfamilliar with your food, please set up an a tasting appointment. Note that you are not beholden to our menu! Our fare is an eclectic blend of Japanese, Chinese, Korean, Portuguese and traditional Hawaiian favorites that have long been the mainstay of homestyle Island cuisine.</p>
    
    					<p>Our friendly staff has the experience, knowledge and resources to make your rehearsal dinner or wedding reception a success. We can accommodate up to 70 people in our restaurant and are "approved caterers" for most off-site locations.</p>
    
    					<p>Not sure what you want?  No problem! Our Ohana will customize a catering package to fit your specific needs. Mention any specific requests or concerns when filling out the form below.</p>
    			
    				</div>
    	
    			</div>
    			
    			<div id="cateringGallery">
    		
    				<div id="cateringGalleryTitle">
    				</div>
    	
    				<div id="cateringGalleryText">
    			
    				<!-- IMAGE GALLERY --!>
    					<div class="img">
      						<a target="_blank" href="images/catering1.jpg">
      						<img src="images/catering1.jpg" alt="Catering 1" width="80" height="80" />
        					</a>
    					</div>
    					
    					<div class="img">
      						<a target="_blank" href="images/catering2.jpg">
      						<img src="images/catering2.jpg" alt="Catering 2" width="80" height="80" />
        					</a>
    					</div>
    					
    					<div class="img">
      						<a target="_blank" href="images/catering3.jpg">
      						<img src="images/catering3.jpg" alt="Catering 3" width="80" height="80" />
        					</a>
    					</div>
    					
    					<div class="img">
      						<a target="_blank" href="images/catering4.jpg">
      						<img src="images/catering4.jpg" alt="Catering 4" width="80" height="80" />
        					</a>
    					</div>
    					
    					<div class="img">
      						<a target="_blank" href="images/catering5.jpg">
      						<img src="images/catering5.jpg" alt="Catering 5" width="80" height="80" />
        					</a>
    					</div>
    					
    					<div class="img">
      						<a target="_blank" href="images/catering6.jpg">
      						<img src="images/catering6.jpg" alt="Catering 6" width="80" height="80" />
        					</a>
    					</div>
    					
    					<div class="img">
      						<a target="_blank" href="images/catering7.jpg">
      						<img src="images/catering7.jpg" alt="Catering 7" width="80" height="80" />
        					</a>
    					</div>
    					
    					<div class="img">
      						<a target="_blank" href="images/catering8.jpg">
      						<img src="images/catering8.jpg" alt="Catering 8" width="80" height="80" />
        					</a>
    					</div>
    					
    					<div class="img">
      						<a target="_blank" href="images/catering9.jpg">
      						<img src="images/catering9.jpg" alt="Catering 9" width="80" height="80" />
        					</a>
    					</div>
    					
    					<div class="img">
      						<a target="_blank" href="images/catering10.jpg">
      						<img src="images/catering10.jpg" alt="Catering 10" width="80" height="80" />
        					</a>
    					</div>
    					
    					<div class="img">
      						<a target="_blank" href="images/catering11.jpg">
      						<img src="images/catering11.jpg" alt="Catering 11" width="80" height="80" />
        					</a>
    					</div>
    					
    					<div class="img">
      						<a target="_blank" href="images/catering12.jpg">
      						<img src="images/catering12.jpg" alt="Catering 12" width="80" height="80" />
        					</a>
    					</div>
    
    				<!-- IMAGE GALLERY --!>
    				
    				</div>
    	
    
    			</div>
    		
    		</div>[/ICODE]
    
    css:
    
    [ICODE]/*BEGIN CATERING STYLES*/
    
    	/*CATERING LEFT*/
    #cateringLeft{
    	width: 470px;
    	height: 1150px;
    }
    
    #catering{
    	width: 470px;
    	margin-top: 15px;
    }
    
    #cateringTitle{
    	background: transparent url('images/catering_title.png') no-repeat 0 0;
    	width: 470px;
    	height: 35px;
    }
    
    #cateringText{
    	background: #EAE8E4;
    	width: 420px;
    	color: #93806E;
    	opacity: 0.9;
    	padding: 20px 25px;
    	text-align: left;
    }
    
    #cateringGallery{
    	width: 470px;
    	height: 340px;
    	margin-top: 25px;
    }
    
    #cateringGalleryTitle{
    	background: transparent url('images/catering_gallery_title.png') no-repeat 0 0;
    	width: 470px;
    	height: 35px;
    }
    
    #cateringGalleryText{
    	background: #EAE8E4;
    	height: 330px;
    	width: 420px;
    	color: #93806E;
    	opacity: 0.9;
    	padding: 20px 25px;
    	text-align: left;
    }
    
    	/*CATERING RIGHT*/
    #cateringRight{
    	width: 285px;
    	height: 1215px;
    	float: right;
    }
    
    #sample{
    	width: 285px;
    	height: 475px;
    	margin-top: 15px;
    	float: right;
    }
    
    #sampleTitle{
    	background: transparent url('images/sample_title.png') no-repeat 0 0;
    	width: 285px;
    	height: 35px;
    	float: right;
    }
    
    #sampleText{
    	background: #EAE8E4;
    	width: 235px;
    	color: #93806E;
    	opacity: 0.9;
    	padding: 20px 25px;
    	text-align: right;
    	margin-top: 35px;
    }
    
    #inquire{
    	width: 285px;
    	height: 690px;
    	margin-top: 25px;
    	float: right;
    }
    
    #inquireTitle{
    	background: transparent url('images/inquire_title.png') no-repeat 0 0;
    	width: 285px;
    	height: 35px;
    	float: right;
    }
    
    #inquireText{
    	background: #EAE8E4;
    	width: 235px;
    	color: #93806E;
    	opacity: 0.9;
    	padding: 20px 25px;
    	text-align: right;
    	margin-top: 35px;
    }
    Last edited by smaashthemac; 11-14-2011 at 06:42 AM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    please post a link or post your code as it is written in a code block. dont make us work so hard

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I did put it in code block? I don't understand what you mean; sorry, I've never posted here before.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello smaashthemac,
    The code you posted does not have a 780px wide container.

    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Oops! sorry about that.

    Code:
    <!-- CATERING LEFT --!>
    <div id="cateringLeft">
    
    <div id="catering">
    
    <div id="cateringTitle">
    </div>
    
    <div id="cateringText">
    
    <p>Magic occurs when the right elements are in place. Bamboo Grove Hawaiian Grille specializes in gathering these elements for your dining pleasure. We offer the best in homestyle island cuisine with flavors so true, so authentically delicious, you'll rediscover the romance of the islands &mdash; even if you've never been there.</p>
    
    <p>Big or small, we will help you organize your event. Fill out the form below to request more information, or give us a call. Think about not only how many people, but what kind of eaters are your guest? Big meat eaters, vegetarians, small appitites, lots of kids? Our restaurant is also available to host your event. Regardless of location, we can handle rentals, music, servers, bartenders, photographers, DJ service, lighting, tents, etc.</p>
    
    <p>If you are unfamilliar with your food, please set up an a tasting appointment. Note that you are not beholden to our menu! Our fare is an eclectic blend of Japanese, Chinese, Korean, Portuguese and traditional Hawaiian favorites that have long been the mainstay of homestyle Island cuisine.</p>
    
    <p>Our friendly staff has the experience, knowledge and resources to make your rehearsal dinner or wedding reception a success. We can accommodate up to 70 people in our restaurant and are "approved caterers" for most off-site locations.</p>
    
    <p>Not sure what you want? No problem! Our Ohana will customize a catering package to fit your specific needs. Mention any specific requests or concerns when filling out the form below.</p>
    
    </div>
    
    </div>
    
    <div id="cateringGallery">
    
    <div id="cateringGalleryTitle">
    </div>
    
    <div id="cateringGalleryText">
    
    <!-- IMAGE GALLERY --!>
    <div class="img">
    <a target="_blank" href="images/catering1.jpg">
    <img src="images/catering1.jpg" alt="Catering 1" width="80" height="80" />
    </a>
    </div>
    
    <div class="img">
    <a target="_blank" href="images/catering2.jpg">
    <img src="images/catering2.jpg" alt="Catering 2" width="80" height="80" />
    </a>
    </div>
    
    <div class="img">
    <a target="_blank" href="images/catering3.jpg">
    <img src="images/catering3.jpg" alt="Catering 3" width="80" height="80" />
    </a>
    </div>
    
    <div class="img">
    <a target="_blank" href="images/catering4.jpg">
    <img src="images/catering4.jpg" alt="Catering 4" width="80" height="80" />
    </a>
    </div>
    
    <div class="img">
    <a target="_blank" href="images/catering5.jpg">
    <img src="images/catering5.jpg" alt="Catering 5" width="80" height="80" />
    </a>
    </div>
    
    <div class="img">
    <a target="_blank" href="images/catering6.jpg">
    <img src="images/catering6.jpg" alt="Catering 6" width="80" height="80" />
    </a>
    </div>
    
    <div class="img">
    <a target="_blank" href="images/catering7.jpg">
    <img src="images/catering7.jpg" alt="Catering 7" width="80" height="80" />
    </a>
    </div>
    
    <div class="img">
    <a target="_blank" href="images/catering8.jpg">
    <img src="images/catering8.jpg" alt="Catering 8" width="80" height="80" />
    </a>
    </div>
    
    <div class="img">
    <a target="_blank" href="images/catering9.jpg">
    <img src="images/catering9.jpg" alt="Catering 9" width="80" height="80" />
    </a>
    </div>
    
    <div class="img">
    <a target="_blank" href="images/catering10.jpg">
    <img src="images/catering10.jpg" alt="Catering 10" width="80" height="80" />
    </a>
    </div>
    
    <div class="img">
    <a target="_blank" href="images/catering11.jpg">
    <img src="images/catering11.jpg" alt="Catering 11" width="80" height="80" />
    </a>
    </div>
    
    <div class="img">
    <a target="_blank" href="images/catering12.jpg">
    <img src="images/catering12.jpg" alt="Catering 12" width="80" height="80" />
    </a>
    </div>
    
    <!-- IMAGE GALLERY --!>
    
    </div>
    
    
    </div>
    
    </div>
    
    css:
    
    /*BEGIN CATERING STYLES*/
    
    /*CATERING LEFT*/
    
    #container{
    	width: 780px;
    	margin: 0 auto;
    	text-align: center;
    }
    
    #cateringLeft{
    width: 470px;
    height: 1150px;
    }
    
    #catering{
    width: 470px;
    margin-top: 15px;
    }
    
    #cateringTitle{
    background: transparent url('images/catering_title.png') no-repeat 0 0;
    width: 470px;
    height: 35px;
    }
    
    #cateringText{
    background: #EAE8E4;
    width: 420px;
    color: #93806E;
    opacity: 0.9;
    padding: 20px 25px;
    text-align: left;
    }
    
    #cateringGallery{
    width: 470px;
    height: 340px;
    margin-top: 25px;
    }
    
    #cateringGalleryTitle{
    background: transparent url('images/catering_gallery_title.png') no-repeat 0 0;
    width: 470px;
    height: 35px;
    }
    
    #cateringGalleryText{
    background: #EAE8E4;
    height: 330px;
    width: 420px;
    color: #93806E;
    opacity: 0.9;
    padding: 20px 25px;
    text-align: left;
    }
    
    /*CATERING RIGHT*/
    #cateringRight{
    width: 285px;
    height: 1215px;
    float: right;
    }
    
    #sample{
    width: 285px;
    height: 475px;
    margin-top: 15px;
    float: right;
    }
    
    #sampleTitle{
    background: transparent url('images/sample_title.png') no-repeat 0 0;
    width: 285px;
    height: 35px;
    float: right;
    }
    
    #sampleText{
    background: #EAE8E4;
    width: 235px;
    color: #93806E;
    opacity: 0.9;
    padding: 20px 25px;
    text-align: right;
    margin-top: 35px;
    }
    
    #inquire{
    width: 285px;
    height: 690px;
    margin-top: 25px;
    float: right;
    }
    
    #inquireTitle{
    background: transparent url('images/inquire_title.png') no-repeat 0 0;
    width: 285px;
    height: 35px;
    float: right;
    }
    
    #inquireText{
    background: #EAE8E4;
    width: 235px;
    color: #93806E;
    opacity: 0.9;
    padding: 20px 25px;
    text-align: right;
    margin-top: 35px;
    }

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by smaashthemac View Post
    Oops! sorry about that.
    You can go back and edit your original post to add those code tags.

    There is still no containing element holding your #cateringLeft and #cateringRight.

    You also comment on your markup incorrectly. Checking your code in the validator can help you a lot. See the links about validation in my signature line.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    The container is for every page, and on other pages I've also got left and right containing divs, and those have worked out just fine. For this one in particular, I copy & pasted those that work, and just changed the div name and sizes.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by smaashthemac View Post
    The container is for every page, and on other pages I've also got left and right containing divs, and those have worked out just fine. For this one in particular, I copy & pasted those that work, and just changed the div name and sizes.
    The container may be for every page but it's not here. I'm not sure how to say it any clearer...
    The code you have provided us has no main containing element.
    There is also no CSS styling a containing element.

    #cateringLeft and #cateringRight are not contained by anything, other than the body of the document, so they just bump up against the right and left edges of the browser window.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    smaashthemac (11-14-2011)

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Did you get it fixed yet?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •