Всякий раз, когда у меня возникают подобные проблемы, я делаю минимальный самостоятельный пример для тестирования. Этот работает отлично, хотя я использовал местное изображение. Когда я уменьшаю ширину до 50 пикселей, изображение выходит за правую сторону границы, поэтому это может быть вашей проблемой. Что именно находится за границей в вашем случае?
Исходя из ваших дальнейших комментариев, которые вы плаваете: оставьте изображение div, ниже показано, в чем может быть ваша проблема. Если вы запустите этот код, вы увидите, что первый граничный div больше не включает изображение. Это проблема, которую вы видите?
<html>
<head>
<style type="text/css">
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>
Включает исправление cleardiv (показанное здесь) для решения проблемы:
<html>
<head>
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
div#x{
float:left;
}
div#paneMiddle>div{
/*All divs that are children of div#paneMiddle*/
width:590px;
margin:5px 5px 5px 5px;
position:relative;
border-color:#FFCC33;
border-style:solid;
border-width:thin;
position:relative;
}
</style>
</head>
<body>
<div id="paneMiddle">
<div class="clearfix" id="subPaneLatestItems">
<p id="latestItemsTitle">Latest Shop Items:</p>
<div id="x">
<img src="img/flower1.bmp" />
<span id="itemName">Ballpen</span>
<br/>
<span id="itemPrice">Php 90.00</span>
</div>
</div>
<div id="subPaneLatestItems2">
Hello
</div>
</div>
</body>
</html>