code_easy code_easy - 6 months ago 33
HTML Question

Fluid images, div getting repositioned

I am practicing with fluid images and divs layouts. In the following code, I managed to have a successful fluid image and fluid div's. However, one of the div on the left

.leftcolumn
(blue colored one) seems to flow vertically below a little into the bottom red div, whenever the browser window is re-sized to the smallest size. Please see the attached screenshot to understand the situation.

I know that this problem can be solved with media queries.But in this case, I am looking to understand as to WHY is this happening, and any alternative solution to this.

Screenshot



html,body {
margin: 0px;
height: 100%;
/* [disabled]width: 100%; */
left: 0px;
top: 0px;
background-color: rgba(255,255,255,1);
font-size: medium;
}

.wrapper {
text-align: center;
margin-top: 0;
margin-left: auto;
height: auto;
max-width: 960px;
background-color: rgba(0,0,0,1);
margin-right: auto;
position: relative;
}


.bigcontainer {
display: block;
/* [disabled]border: 1px solid black; */
margin-top: 0px;
margin-right: 10%;
margin-left: 10%;
background-color: rgba(204,204,204,1);
max-width: 100%;
font-size: xx-large;
color: rgba(255,255,255,1);
top: 0px;
height: auto;
/* [disabled]margin-bottom: -3px; */
position: relative;
}

img{
max-width: 100%;
max-height: 100%;
/* [disabled]margin-bottom: -9px; */
display: block;
}

.leftcolumn {
width: 10%;
height: 96%;
background-color: rgba(0,0,255,1);
position: absolute;
margin-top: 0px;
margin-left: 0px;
left: 0px;
top: 0px;
margin-bottom: 10%;
overflow: hidden;
}

.rightcolumn {
width: 10%;
background-color: rgba(204,255,0,1);
height: 100%;
position: absolute;
margin-top: 0px;
margin-left: 0px;
top: 0px;
right: 0px;
}

.text {
height: auto;
width: auto;
color: rgba(255,255,255,1);
position: absolute;
margin-left: auto;
font-size: 18px;
margin-right: auto;
top: 0px;
}

.text2 {
height: 10%;
width: auto;
color: rgba(255,255,255,1);
top: 0px;
margin-left: 0%;
font-size: 18px;
/* [disabled]float: left; */
margin-right: 10%;
}

.text3 {
height: auto;
width: auto;
color: rgba(255,255,255,1);
top: 0px;
margin-left: 5%;
font-size: 18px;
background-color: rgba(0,0,255,1);
float: left;
}

<div class="wrapper">
<div class="leftcolumn">

</div>

<div class="rightcolumn">

</div>
<div class="bigcontainer">
<img src="http://i1062.photobucket.com/albums/t482/gautam_official/royal-enfield-motorcycle-2x_zpswmyloqvc.jpg" alt="enfield">

<div class="text">
This is text. Its in center
</div>
</div>
<div class="text2">
This one is below text
</div>

</div>




Answer

TL;DR: Set position:relative to .text2.

This is happening because your element .text2 is not set with position:relative. He is by default position:static, which means he is not "positioned" (anything but static is considered positioned). When an element is static it have no z-index and stay under the other "positioned" elements. Look at what CSS Tricks say about setting the position to relative:

"... One is that it introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element. You can't fight it by setting a higher z-index value on a statically positioned element."

In your case the other "positioned" elements are getting above your static .text2.

"Elements with non-static positioning will always appear on top of elements with default static positioning."

HERE for more information about positioning and HERE to understand about z-index.

Sorry about my english. :)


Based on the comments of this answer I'll try to elaborate another solution.

The thing is that the .leftcolumn have height: 96%. The 96% is the percentage related to the containing block (the .wrapper) that have no height set.

So another solution would be to put the .leftcolumn inside the .bigcontainer. The .bigcontainer would accomodate the .leftcolumn and the image. The height of the .leftcolumn would be set to 100%, now measuring the .bigcontainer as the containing box (that will have the image height). See the snippet:

.wrapper {
	margin: auto;
	max-width: 960px;
	background-color: rgba(0,0,0,1);
	position: relative;
}


.bigcontainer {
	display: block;
	background-color: rgba(204,204,204,1);
	color: rgba(255,255,255,1);
	position: relative;
	max-width: 90%;
	height: 90%;
}

img{
	max-width: 90%;
	max-height:100%;
	margin-left:10%;
	display: block;
}

.leftcolumn {
	width: 10%;
	height: 100%;
	background-color: rgba(0,0,255,1);
	position: absolute;
	left: 0px;
}

.rightcolumn {
	width: 10%;
	background-color: rgba(204,255,0,1);
	height: 100%;
	position: absolute;
	margin-top: 0px;
	margin-left: 0px;
	top: 0px;
	right: 0px;
}

.text {
	height: auto;
	width: auto;
	color: rgba(255,255,255,1);
	position: absolute;
	top: 0px;
	margin-left: 12%;
	font-size: 18px;
}

.text2 {
	height: 10%;
	width: auto;
	color: rgba(255,255,255,1);
	top: 0px;
	margin-left: 0%;
	font-size: 18px;
	margin-right: 10%;
}

.text3 {
	height: auto;
	width: auto;
	color: rgba(255,255,255,1);
	top: 0px;
	margin-left: 5%;
	font-size: 18px;
	background-color: rgba(0,0,255,1);
	float: left;
}
<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<title>Teste</title>
		<link rel="stylesheet" href="stylesheet.css" type="text/css">
	</head>
    <body>
	
		<div class="wrapper">
			
			<div class="rightcolumn"></div>
			<div class="bigcontainer">
				<div class="leftcolumn"></div>
				<img src="http://i1062.photobucket.com/albums/t482/gautam_official/royal-enfield-motorcycle-2x_zpswmyloqvc.jpg" alt="enfield">

				<div class="text">
					This is text. Its in center
				</div>
			</div>
			<div class="text2">
			This one is below text
		</div>

		</div>
			
    </body>
</html>

Hope this helps. :)