CSS Position:Overflow issue - html

Question

I am trying to get the picture in the 2nd div to overflow the parent div. I have played around with different position attributes and overflow:visible, but none seem to solve my issue.
How can I solve this?
Thanks
EDIT: Okay scrap that first code - here is the actual code:
I want to get the slider to stretch across and overflow the sp_block
EDIT 2: I must not edit the first 4 divs by the way.
<div id="sp_header">
<div id="sp_block_16" class="sp_block_section_last">
<div>
<div class="sp_block">
<!--
must have
-->
<link type="text/css" rel="stylesheet" href="http://www.dedicatedrejects.com/icsa/test/slider/allinone_contentSlider.css"></link>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cabin"></link>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.dedicatedrejects.com/icsa/test/slider/js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="http://www.dedicatedrejects.com/icsa/test/slider/js/allinone_contentSlider.js"></script>
<!--
must have
-->
<script></script>
<div style="position:relative; width:1562px; height:351px; overflow:visible;">
<div style="width:1562px; height:351px; position:absolute; overflow:visible; margin: 0 auto;">
<div class="allinone_contentSlider imposing" style="width: 1562px; height: 351px;">
<div id="allinone_contentSlider_imposing" style="position:relative overflow:visible;"></div>
<div class="bottomNavRight" style="display: block; bottom: -35px; top: auto; left: 813px;"></div>
<div class="bottomNav" style="display: block; bottom: -35px; top: auto; width: 46px; left: 758px;"></div>
<div class="bottomNavLeft" style="display: block; bottom: -35px; top: auto; left: 758px;"></div>
<div class="bannerControls" style="margin-top: 105px;"></div>
<div class="contentHolderVisibleWrapper" style="width: 1562px; height: 351px;">
<div class="contentHolder ui-draggable" style="cursor: url("skins/hand.cur"), url("skins/hand.cur"), move; … top: 0px; position: absolute; width: 3124px; height: 351px;">
<div id="contentHolderUnit_0" class="contentHolderUnit" rel="0" style="width: 1562px; height: 351px;">
<img src="https://robertsspaceindustries.com/media/6kahqz455yu40r/post_section_header/StarCitizenDev-2014-04-11-14-10-32-75.jpg" style="position:absolute;"></img>
<img src="http://i.imgur.com/vcifs31.png" style="position:absolute; z-index:10;"></img>
</div>
<div id="allinone_contentSlider_photoText0" class="allinone_contentSlider_texts" style="z-index: 11; width: 1562px; left: 0px; top: 0px; display: none;"></div>
<div id="contentHolderUnit_1" class="contentHolderUnit" rel="1" style="width: 1562px; height: 351px;"></div>
<div id="allinone_contentSlider_photoText1" class="allinone_contentSlider_texts" style="z-index: 11; width: 1562px; left: 1562px; top: 0px; display: none;"></div>
</div>
</div>
<div class="playOver" style="left: 744px; top: 139px; display: none;"></div>
<canvas class="mycanvas" width="36" height="36"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

As it is, the image will appear outside the parent div, for no overflow has been specified. If you want it to hide inside the parent div, just add to the div:
{
overflow: hidden;
}
http://jsfiddle.net/Cn3n3/2/

Answer 2

The inline width and height attributes (within the <img> tag) shouldn't have the px unit in them. Only specify the number of pixels without a unit. You shouldn't need to specify overflow, since the defaults will suit your needs in this case.
See example: http://jsfiddle.net/orvn/ansBc/1/
<div id="container">
<img src="http://foo.com/image.jpg" width="500">
</div>
#container { width: 300px; }
#container > img { display: block; }
Additionally, you don't need to wrap the image in a div here, you can apply display: block; to have it behave the way a div would.

Answer 3

Not sure what you're trying to achieve but the parent div needs the overflow tag.
HTML
<div class="parent">
<div class="child">image</div>
</div>
CSS
.parent {
width:700px;
height:200px;
overflow:visible;
background-color:green;
}
.child {
width:1000px;
height:100px;
background-color:red;
}
Here is a demo jsfiddel
I made the parent div background height longer so you can see the overflow. You can also replace the background color with an image. Replace the class (parent & Child) and write this inline but I advise against that.