CODEWITHSUNDEEP
htmlcss
code_easy
code_easy

Reputation: 73

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>

Upvotes: 1

Views: 98

Answers (2)

Peyman Mohamadpour
Peyman Mohamadpour

Reputation: 17954

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 .leftupperright img{
  width: 100%;
}

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

Upvotes: 0

ArturLP
ArturLP

Reputation: 58

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. :)

Upvotes: 1

Related Questions