Images won't appears inside previous DIV

HTML & CSS
1

http://swearingatvideogames.com/2010/02/16/dantes-inferno-acre/

Trying to get those 2 images under BOSS: DEATH to be inside the overall DIV with the border.

<div class="achievearea">
<div class="achievetop"><div class="achievement">BOSS: DEATH</div><div class="gspoints">&nbsp;</div></div>
Make use of your Block while Death is swinging at you. His first attack consists of 3 swings of the scythe which are blockable. Once his attack subsides hit him with a mixture of Quick and Strong attacks and then go back on the defensive. If you see Death add some fire to his scythe then be ready to Double Jump as he comes down to jump over his Shockwave. Once you've given Death a good beatdown he'll eventually start to grab you. A quick [B] button smash will release you with no damage done. Eventually you'll come to a button sequence to end the fight. [RT] - [X]. Then do some more damage to him and you'll get a final button sequence. [RT] - [B smash] - [X]

<a rel="shadowbox[acre_01]" href="http://swearingatvideogames.com/images/dante/01_01_01.jpg"><div class="achieveimg caption"><img src="http://swearingatvideogames.com/images/dante/01_01_01s.jpg" border="0" alt="" />
<div class="cover achievecaption">Death's Main 3 Strike Attack</div></div></a>

<a rel="shadowbox[acre_01]" href="http://swearingatvideogames.com/images/dante/01_01_02.jpg"><div class="achieveimg caption"><img src="http://swearingatvideogames.com/images/dante/01_01_02s.jpg" border="0" alt="" />
<div class="cover achievecaption">Glowing Scythe = Jump</div></div></a>

</div>

The CSS I am using:

div.achievearea {
	border: 1px solid silver;
	padding: 3px;
	margin-bottom: 16px;
}

div.achievetop {
        margin-top: 4px;
	padding: 2px;
	background: #EEEEEE;
}

div.achievebottom {
        margin-top: 0px;
	padding: 2px;
	background: #EEEEEE;
}

div.achievement {
        width: auto;
	font-weight: bold;
	float: left;
        color: #000;
}

div.achievetitles {
	width: auto;
	text-align: center;
        color: #000;
        font-weight: bold;
        font-size: 11pt;    
}
div.achievetitles a:link {
	color: #000;
}
div.achievetitles a:visited {
	color: #000;
}

div.achievetitlestop {
	width: auto;
	text-align: center;
        font-weight: bold;
        font-size: 13pt;
}

div.gspoints {
        width: auto;
	text-align: right;
        color: #000;
        font-weight: bold;
}

div.achieveimg{
	width: 240px;
        float: left;
        display: inline;
	height: 130px;
	margin: 15px 12px 5px 12px;
	background: #161613;
	border: solid 2px #666;
	position: relative;
	overflow: hidden;
	text-align: center;
}

div.achieveimg img{
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}

div.achievecaption{
	position: absolute;
	background: #000;
	height: 20px;
	width: 100%;
	opacity: .8;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.captionfull .achievecaption {
	top: 20px;
	left: 0;
}

.caption .achievecaption {
	top: 112px;
	left: 0;
}

I know just enough to be dangerous is my problem. Thanks for any help!

2

Hi, the “div.achieveimg” is floated and as a result the parent doesn’t even know it is there. It needs a clearing mechanism placed on the parent

div.achievearea {overflow:hidden;}

Also, it’s invalid to have block element placed inside an inline element (aka a <div> inside an <a> ;))

3

Thanks for the tip!

4

You’re welcome :).

5

OK. Now the images are inside but the text appears to be aligned over the right image.

http://swearingatvideogames.com/2010/02/16/dantes-inferno-shores-of-acheron/

6

Hi, if you mean the text “Just to the left of the Poet is a high alcove with the first piece of silver. Just a standard jump up there to get the silver.” (and the other side) it’s because you need to wrap that text around a block element and not just let it hang there :). Just wrap a <p> there around the text (on all instances of that)

7

Thanks again!

8

Glad to help :). If you have any further questions a new thread might be appropriate so we don’t make this thread too long (and since they are different questions ;))