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?

http://i39.tinypic.com/azgpll.png

html:


<!-- 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;
}

please post a link or post your code as it is written in a code block. dont make us work so hard

I did put it in code block? I don't understand what you mean; sorry, I've never posted here before.

Hello smaashthemac,
The code you posted does not have a 780px wide container.

When posting code in the forum, please use the code tags, [code][/code] - 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.

Oops! sorry about that.

<!-- 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;
}

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.

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 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.

Did you get it fixed yet?