Keeping DIV Child Elements Inside Parents Parameter

[reececropley]

Hey I'm having a bit of a weird problem.

I have an image contains in a div (#rel-content) and that div inside of another (#releases). Here is my HTML code:

<div class="releases">
            	<div id="rel-topbar"><img src="images/blackrightbar.jpg" width="312" height="39" alt="Release Navigation Bar">
                </div> <!-- rel-topbar -->
                <div id="rel-content"><a href="http://itunes.apple.com/gb/album/erased/id377011296?uo=4" target="itunes_store" ><img src="images/album-cover.jpg" width="300" height="300" alt="Hope of the Hated - Erased Album Cover" style="border-style: none" /></a>
                <h2><span>Buy The Album:<br/ >Available now on iTunes!</span></h2>
                </div> <!-- rel-content -->
            </div><!-- releases -->

As you can see inside #rel-content I have an image and a header inside. What I want is the header (h2) to overlap the image. Whereas what I'm receiving is the header flying to the other side of the page.

Here is my CSS for the div's:

#rel-content{
	margin: 10px 0px 10px 5px;
}
#rel-content img{
	position: relative;
	width:100%;
}
#rel-content h2{
	position:absolute;
	top:200px;
	left:0;
	width:100%;
	display:block;
}
#rel-content h2 span{
	color:white;
	font: bold 24/25px Helvetica, Sans-serif;
	letter-spacing: -1px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.7);
	padding:10px;
}

Here is an image of what is showing up:
[IMG]http://i55.tinypic.com/5yg7wg.png[/IMG]
http://i55.tinypic.com/5yg7wg.png

I hope this makes sense as to what I'm trying to achieve. Really appreciate any responses.

Reece Cropley

[skald89]

it may be either that your left is 0 and not 0px. The second thing may be that you do not have z-index.z-index

[reececropley]

Cheers skald89, but 0 rather than 0px should just cause validation error. Tried them both however just in case and no change.

If I change the values for top and left I can get it to display in the right area, but once the browser size has changed it goes off on its own, and that's no good is it??

The DIV class that .releases is contained in .rightside has a float value of right. Just a shot in the dark but could this have anything to do with it? I'm forever having problems with structure once I use float values.

.rightside{
	/*width:365px;*/
	float:right;
	/*margin-right:15px;*/
}
#rel-content h2{
	position:absolute;
	top:200px;
	[B]left:0px;[/B]
	width:100%;
	display:block;
	[B]z-index: 1;[/B]
}

[reececropley]

So I have just worked out a way around it but it doesn't seem to be a very good technique as im using negative values. I removed the top and the left values on h2 and simply replaced with a margin-top with a negative value of -55px.

Any other methods or techniques would be brilliant to hear, why have one solution when you can have many.

#rel-content h2{
	position:absolute;
	width:100%;
	display:block;
	z-index: 1;
	margin:-55px 0px;	
}

[skald89]

Cheers skald89, but 0 rather than 0px should just cause validation error. Tried them both however just in case and no change.

If I change the values for top and left I can get it to display in the right area, but once the browser size has changed it goes off on its own, and that's no good is it??

The DIV class that .releases is contained in .rightside has a float value of right. Just a shot in the dark but could this have anything to do with it? I'm forever having problems with structure once I use float values.

.rightside{
	/*width:365px;*/
	float:right;
	/*margin-right:15px;*/
}
#rel-content h2{
	position:absolute;
	top:200px;
	[B]left:0px;[/B]
	width:100%;
	display:block;
	[B]z-index: 1;[/B]
}

Im also a new at this stuff. I think float right means that it will float to the right of something and allow you to set up things up on one line.

Lets say you wanted to do this.

1 2 3 4 5 6 7

and have them all on one line and each to be able to go their own link or do something and you dont want each to be in their own div. You would set the float to left and have a right margin of Xpx. Thats what I did for a class project the other day, I didnt try float right it may do the same thing or do something completely different.

[reececropley]

I tried both 'float:left' and 'float:right' same effect.

I believe 'display:inline' is a good way to stop the browser rendering new lines and keeping them all on the same line.

I'm going to leave this thread at that, deadline to tight to dwell on the same part. Thanks for your help.