Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Fluid Images, Div Getting Repositioned

Post a Comment
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 .leftcolu

Solution 1:

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><htmllang="pt-BR"><head><title>Teste</title><linkhref=".css"type="text/css"></head><body><divclass="wrapper"><divclass="rightcolumn"></div><divclass="bigcontainer"><divclass="leftcolumn"></div><imgsrc="http://i1062.photobucket.com/albums/t482/gautam_official/royal-enfield-motorcycle-2x_zpswmyloqvc.jpg"alt="enfield"><divclass="text">
					This is text. Its in center
				</div></div><divclass="text2">
			This one is below text
		</div></div></body></html>

Hope this helps. :)

Solution 2:

Is this the desired output?

.wrapper{
  max-width: 960px;
  margin: 0 auto;
}

.wrapper, .leftupper{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  text-align: center;
}

.left{
  flex-basis: 90%;
  color: white;
}

.right{
  flex-basis: 10%;
  flex-shrink: 0;
  background-color: rgba(204,255,0,1);
}

.left.leftupperleft{
  flex-basis: 10%;
  flex-shrink: 0;
  background-color: rgba(0,0,255,1);
}

.left.leftupperright{
  position: relative;
  background-color: rgba(204,204,204,1);
}

.left.leftupperright.text{
  position: absolute;
}

.left.leftupperrightimg{
  width: 100%;
}

.left.leftlower{
  background-color: rgba(255,0,0,1);
}
<divclass="wrapper"><divclass="left"><divclass="leftupper"><divclass="leftupperleft"></div><divclass="leftupperright"><divclass="text">This is text. Its in center</div><imgsrc="http://i1062.photobucket.com/albums/t482/gautam_official/royal-enfield-motorcycle-2x_zpswmyloqvc.jpg"alt="enfield"></div></div><divclass="leftlower">This one is below text</div></div><divclass="right"></div></div>

Post a Comment for "Fluid Images, Div Getting Repositioned"