My div is NOT stacking left? - html

Question

All I want is my two divs to stack next to one another. They are located inside a container. Why isn't it working?
This is my CSS:
#housecontainer {
height: 420px;
width: 1000px;
padding-left: 110px;
padding-top: 80px;
}
#houseimage {
float: left;
height: 388px;
width: 516px;
}
#rose {
width:200px;
height:100px;
float:left;
}

Answer 1

Judging by the HTML you posted in your comment, your page structure is:
#devcontainer
#develbox
#housecontainer
#houseimage
p
a
img
#rose
Since #rose is a child of #houseimage, it doesn't follow the same floating as it. Since #houseimage has a width of 516 and so does the image, there's no room left for #rose and it is forced below.
Just put one more </div> before <div id="rose">, so that it's inside #housecontainer and next to #houseimage, like you want. Then add the two other </div> you're missing.

Answer 2

You have several structure errors.
Try structuring your HTML like this:
http://jsfiddle.net/bGyV4/

Answer 3

This is the HTML you posted in your comment:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
<div id="rose">
<div id="rose">THIS ISNT WORKING!!!</div>
</div>
</p>
</div>
</div>
There are a number of issues with this:
The id of an element must be unique. It is used to identify the element. In your markup there are two div elements with id="rose".
From your question, it seems as if you want #houseimage and #rose to be side-by-side. This is not happening because #rose is inside #houseimage. That is, it is a child of #houseimage. You need to move it outside the div so that #rose is a sibling of #houseimage.
Change your HTML to be like this:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">
<div id="roseChild">THIS ISNT WORKING!!!</div>
</div>
</div>
jsFiddle Demo

Answer 4

your html error,some DIV tag not closed,try this:
<div id="devcontainer">
<div id="develbox">
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">THIS ISNT WORKING!!!</div></div>
</div>
</div>
</div>