CODEWITHSUNDEEP
htmlcss
Becky
Becky

Reputation: 2289

Container div out of parent div

I can't seem to figure out why my project-img-text-container is falling outside of its parent div project-image-container and project-img-main. I added in project-image-container to combat this issue, but it did nothing and I am drawing a blank. I have both containers set to relative, so not sure why project-img-text-container is falling out when it is set to absolute.

Anyone see why?

#project-img-main {
	position: relative;
	margin: 0;
	width: 100%;
	height: auto;
}
#project-image-container {
	width: 100%;
	height: 100%;
	position: relative;
}
#project-img-window {
	max-height: 700px;
	/*background: rgba(0,0,0,0);*/
	width: 100%;
}
#project-img-text-container {
	background: rgba(0,0,0,.7);
	position: absolute;
	width: 33%;
	height: 100%;
	left: 60%;
	z-index: 99;
}
#project-img-text {
	color: #FFF;
	font-size: 2em;

}
	<div id="project-img-main">
		<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
			<div id="project-img-text-container">
				<div id="project-img-text">Test</div>
			</div>
		</div>	
	</div>

Upvotes: 0

Views: 664

Answers (3)

Sleek Geek
Sleek Geek

Reputation: 4686

If you are not going to use a defined height, position: relative alone can not hold the element within. Since project-img-text-container position property value is absolute, you need to add top:0 to its block of CSS.

#project-img-main {
	position: relative;
	margin: 0;
	width: 100%;
	height: auto;
}
#project-image-container {
	width: 100%;
	height: 100%;
	position: relative;
}
#project-img-window {
	max-height: 700px;
	/*background: rgba(0,0,0,0);*/
	width: 100%;
}
#project-img-text-container {
	background: rgba(0,0,0,.7);
	position: absolute;
	width: 33%;
	height: 100%;
     top: 0; /* This has to be 0 to bring it up to the top */
	left: 60%;
	z-index: 99;
}
#project-img-text {
	color: #FFF;
	font-size: 2em;

}
<div id="project-img-main">
		<div id="project-image-container"><img src="http://optimumwebdesigns.com/eslich/images/projects/project-main3.jpg" id="project-img-window" alt="Demolition and Wrecking Projects">
			<div id="project-img-text-container">
				<div id="project-img-text">Test</div>
			</div>
		</div>	
	</div>

Upvotes: 1

rittam
rittam

Reputation: 318

Try adding 

img{
  position: absolute;
}

Working fiddle: https://jsfiddle.net/rittamdebnath/hwj28zm3/

Upvotes: 0

Callam
Callam

Reputation: 1009

#project-img-text-container {
    top:0;
}

When setting something as position absolute, you need to specify it's position within the document or containing element.

Upvotes: 3

Related Questions