we have the following div structure, where we would like to horizontally center both the image and the text within the container div. However, the image is left aligned and only the title is centered.You could find the code below:
.QHeader {
position: absolute;
margin-top: 96px;
margin-left: 0px;
width: 800px;
height: 415px;
background-image: url('../img/bg_blue_rect.png');
background-repeat: no-repeat;
background-position: left top;
}
#QHeaderImg01 {
position: absolute;
display: block;
margin: 0 auto;
margin-top: 72px;
width: 263px;
height: 221px;
background-color: #0F0;
}
.QHeaderTitle {
position: absolute;
margin-top: 324px;
margin-left: 0;
width: 800px;
height: auto;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight: bold;
color: #000;
}
<div class="QHeader">
<img id="QHeaderImg01" src="img/q_header_img_01.png" />
<div class="QHeaderTitle">
TITLE
</div>
<!--QHeaderTitle-->
</div>
<!--QHeader-->
Just remove your position: absolute; or change it to position: relative;, as you will not need absolute positioning to horizontally center your elements:
.QHeader {
width: 800px;
height: 415px;
background-image: url(http://placehold.it/800x415);
background-repeat: no-repeat;
background-position: left top;
}
#QHeaderImg01 {
display: block;
margin: 0 auto;
width: 263px;
height: 221px;
background-color: #0F0;
}
.QHeaderTitle {
margin-top: 50px;
width: 800px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight: bold;
color: #000;
}
<div class="QHeader">
<img id="QHeaderImg01" src="http://placehold.it/263x221/0c0" />
<div class="QHeaderTitle">
TITLE
</div>
<!--QHeaderTitle-->
</div>
<!--QHeader-->
just change
#QHeaderImg01 {
position:absolute;
}
to
#QHeaderImg01 {
position:relative;
}
and of cource, remove the big margin-top
div.container {
height: 10em;
position: relative }
div.container p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
<body>
<div class=container>
<IMG class="displayed" src="http://labs.qnimate.com/slider/1.jpg" alt="...">
<p>Centered!
</div>
or
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
div.container {
height: 10em;
position: relative }
div.container p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
<IMG class="displayed" src="http://labs.qnimate.com/slider/1.jpg" alt="...">
<div class=container>
<p>Centered!
</div>
Related
I have a slightly rotated div creating an asymetrical graphic on my start page. I use overflow: hidden to hide the overlap from that div. Everything uses absolute positioning to get the elements exactly where I want them and vw and vh to make it responsive. It looks great while the aspect ratio is "normal" but when the window approaches a 2 or 3:1 aspect ratio (like an ultrawide monitor) everything overlaps. Narrow aspect ratio is not a problem since I have it switch to mobile view before it becomes a problem.
I considered using overflow: auto so it wouldn't be forced to fit in the viewport but then it's possible to see the edges of the rotated div.
Is there a solution to this or is this perhaps bad practice and should be done differently?
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#body {
overflow: hidden;
background: red;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.shape {
position: absolute;
right: -10%;
top: -50%;
height: 200%;
width: 45%;
transform: rotate(350deg);
background: white;
}
#welcome {
position: absolute;
color: black;
z-index: 999;
margin-left: 65vw;
margin-top: 10vh;
}
#welcome h1 {
margin-bottom: 0;
font-size: 7vw;
}
#welcome p {
font-size: 4vw;
margin-top: 0;
}
#startbtn {
position: absolute;
font-size: 3vw;
padding: 4vh 5.5vw 4vh 5.5vw;
background: blue;
color: white;
border: none;
margin-left: 65vw;
margin-top: 70vh;
}
<body id="body">
<div class="shape"></div>
<div class="wrapper">
<div id="welcome" autofocus>
<h1>Welcome</h1>
<p>More Text Here</p>
</div>
</div>
<div class="wrapper">
<input type="button" id="startbtn" onclick="getstarted()" value="Get Started">
</div>
</body>
</html>
Thanks!
Welcome to Stackoverflow.
Putting the shape into the same container (I used the first wrapper) as your content should fix the problem. Why is this: Because the white shape should be in relation to your content. Also I did put the button in the same container.
And you dont need background-sizes for your body as it is just plain red.
I might have messed up your original dimensions, but this should do the trick.
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
overflow: hidden;
background: red;
}
.wrapper {
position: relative;
height: 100%;
}
.shape {
position: absolute;
margin-top: -50%;
margin-right: -50%;
right: 0;
height: 300%;
width: 100%;
transform: rotate(350deg);
background: white;
}
#welcome {
position: absolute;
color: black;
z-index: 999;
margin-left: 65vw;
margin-top: 10vh;
}
#welcome h1 {
margin-bottom: 0;
font-size: 7vw;
}
#welcome p {
font-size: 4vw;
margin-top: 0;
}
#startbtn {
position: absolute;
font-size: 3vw;
padding: 4vh 5.5vw 4vh 5.5vw;
background: blue;
color: white;
border: none;
margin-left: 65vw;
margin-top: 70vh;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#body {
overflow: hidden;
background: red;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.wrapper {
position: relative;
height: 100%;
}
.shape {
position: absolute;
margin-top: -50%;
margin-right: -50%;
right: 0;
height: 300%;
width: 100%;
transform: rotate(350deg);
background: white;
}
#welcome {
position: absolute;
color: black;
z-index: 999;
margin-left: 65vw;
margin-top: 10vh;
}
#welcome h1 {
margin-bottom: 0;
font-size: 7vw;
}
#welcome p {
font-size: 4vw;
margin-top: 0;
}
#startbtn {
position: absolute;
font-size: 3vw;
padding: 4vh 5.5vw 4vh 5.5vw;
background: blue;
color: white;
border: none;
margin-left: 65vw;
margin-top: 70vh;
}
<div class="wrapper">
<div class="shape"></div>
<div id="welcome" autofocus>
<h1>Welcome</h1>
<p>More Text Here</p>
</div>
<input type="button" id="startbtn" onclick="getstarted()" value="Get Started">
</div>
Unity WebGL build create an html template where I can specifiy width and height size.
How can I set div id="gameContainer" width based on browser window width to have it always filled ?
.webgl-content * {
border: 0;
margin: 0;
padding: 0
}
.webgl-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.webgl-content .logo,
.progress {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.webgl-content .logo {
background: url('progressLogo.Light.png') no-repeat center / contain;
width: 154px;
height: 130px;
}
.webgl-content .progress {
height: 18px;
width: 141px;
margin-top: 90px;
}
.webgl-content .progress .empty {
background: url('progressEmpty.Light.png') no-repeat right / cover;
float: right;
width: 100%;
height: 100%;
display: inline-block;
}
.webgl-content .progress .full {
background: url('progressFull.Light.png') no-repeat left / cover;
float: left;
width: 0%;
height: 100%;
display: inline-block;
}
.webgl-content .logo.Dark {
background-image: url('progressLogo.Dark.png');
}
.webgl-content .progress.Dark .empty {
background-image: url('progressEmpty.Dark.png');
}
.webgl-content .progress.Dark .full {
background-image: url('progressFull.Dark.png');
}
.webgl-content .footer {
margin-top: 5px;
height: 38px;
line-height: 38px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 18px;
}
.webgl-content .footer .webgl-logo,
.title,
.fullscreen {
height: 100%;
display: inline-block;
background: transparent center no-repeat;
}
.webgl-content .footer .webgl-logo {
background-image: url('webgl-logo.png');
width: 204px;
float: left;
}
.webgl-content .footer .title {
margin-right: 10px;
float: right;
}
.webgl-content .footer .fullscreen {
background-image: url('fullscreen.png');
width: 38px;
float: right;
}
form input[type="file"] {
display: none;
position: absolute;
}
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 960px; height: 600px; margin: auto"></div>
</div>
<!-- BEGIN WEBGL FILE BROWSER LIB -->
<form id="fileBrowserPopup" style="display: none;">
<img src="TemplateData/2x2.png" style="position: absolute; width: 100%; height: 100%;"/>
<img src="TemplateData/White-Button.png" style="position: absolute; top: 35%; left: 38%; width: 25%; height: 28%;"/>
<label for="fileToUpload">
<img src="TemplateData/upload_button.png" style="position: absolute; top: 45%; left: 42.8%; width: 16%; height: 10%;"/>
</label>
<input type="File" name="fileToUpload" id="fileToUpload" style="width: 0px; height: 0px;" onchange="sendfile(event);return false;" />
</form>
</body>
You can use the vw which stands for view width attribute. vh stands for view height.
Read more about possible values you can use on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths
So if you wish to have it as broad and high as the viewport you can set it to:
<div id="gameContainer" style="width: 100vw; height: 100vh; margin: auto"></div>
As demonstrated in this snippet, where I moved the inline css to the css file as well.
.body {
margin: 0px;
}
#gameContainer {
width: 100vw;
height: 100vh;
display: block;
background-color: black;
}
.webgl-content * {
border: 0;
margin: 0;
padding: 0
}
.webgl-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.webgl-content .logo,
.progress {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.webgl-content .logo {
background: url('progressLogo.Light.png') no-repeat center / contain;
width: 154px;
height: 130px;
}
.webgl-content .progress {
height: 18px;
width: 141px;
margin-top: 90px;
}
.webgl-content .progress .empty {
background: url('progressEmpty.Light.png') no-repeat right / cover;
float: right;
width: 100%;
height: 100%;
display: inline-block;
}
.webgl-content .progress .full {
background: url('progressFull.Light.png') no-repeat left / cover;
float: left;
width: 0%;
height: 100%;
display: inline-block;
}
.webgl-content .logo.Dark {
background-image: url('progressLogo.Dark.png');
}
.webgl-content .progress.Dark .empty {
background-image: url('progressEmpty.Dark.png');
}
.webgl-content .progress.Dark .full {
background-image: url('progressFull.Dark.png');
}
.webgl-content .footer {
margin-top: 5px;
height: 38px;
line-height: 38px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 18px;
}
.webgl-content .footer .webgl-logo,
.title,
.fullscreen {
height: 100%;
display: inline-block;
background: transparent center no-repeat;
}
.webgl-content .footer .webgl-logo {
background-image: url('webgl-logo.png');
width: 204px;
float: left;
}
.webgl-content .footer .title {
margin-right: 10px;
float: right;
}
.webgl-content .footer .fullscreen {
background-image: url('fullscreen.png');
width: 38px;
float: right;
}
form input[type="file"] {
display: none;
position: absolute;
}
<body>
<div class="webgl-content">
<div id="gameContainer"></div>
</div>
<!-- BEGIN WEBGL FILE BROWSER LIB -->
<form id="fileBrowserPopup" style="display: none;">
<img src="TemplateData/2x2.png" style="position: absolute; width: 100%; height: 100%;"/>
<img src="TemplateData/White-Button.png" style="position: absolute; top: 35%; left: 38%; width: 25%; height: 28%;"/>
<label for="fileToUpload">
<img src="TemplateData/upload_button.png" style="position: absolute; top: 45%; left: 42.8%; width: 16%; height: 10%;"/>
</label>
<input type="File" name="fileToUpload" id="fileToUpload" style="width: 0px; height: 0px;" onchange="sendfile(event);return false;" />
</form>
</body>
I am trying to center 4 div boxes in a straight vertical line using translate method you use when centering objects in the middle of the screen, this is the code I used:
.body-component {
position: relative;
margin: 10px;
color: #000;
display: inline-block;
vertical-align: top;
background-color: #ff6d00;
overflow: auto;
border: 1px solid #D0D3D4;
}
.width-medium {
width: 500px;
}
.height-medium {
height: 400px;
}
.code-snippet {
position: relative;
width: 95%;
height: 95%;
background-color: #000;
}
.snippet-title {
position: absolute;
color: #248b98;
font-family: "Open Sans", sans-serif;
padding: 15px;
text-decoration: underline;
z-index: 1;
}
.center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0px;
}
.boxes {
position: relative;
width: 100%;
height: 100%;
}
.box1 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 20%;
left: 50%;
transform: translate(-20%, -50%);
}
.box2 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 40%;
left: 50%;
transform: translate(-40%, -50%);
}
.box3 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 60%;
left: 50%;
transform: translate(-60%, -50%);
}
.box4 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 80%;
left: 50%;
transform: translate(-80%, -50%);
}
<div class="body-component width-medium height-medium">
<span class="snippet-title">Box loading animation</span>
<div class="code-snippet center">
<div class="boxes">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
</div>
I tried multiple methods to fix this, but I would not like to centre them using pixels because I am using this on a responsive website.
If absolute positioning, you can use left: 50% with a negative translateX of 50%.
.body-component {
position: relative;
margin: 10px;
color: #000;
display: inline-block;
vertical-align: top;
background-color: #ff6d00;
overflow: auto;
border: 1px solid #D0D3D4;
}
.width-medium {
width: 500px;
}
.height-medium {
height: 400px;
}
.code-snippet {
position: relative;
width: 95%;
height: 95%;
background-color: #000;
}
.snippet-title {
position: absolute;
color: #248b98;
font-family: "Open Sans", sans-serif;
padding: 15px;
text-decoration: underline;
z-index: 1;
}
.center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0px;
}
.boxes {
position: relative;
width: 100%;
height: 100%;
}
.box {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
left: 50%;
transform: translateX(-50%)
}
.box1 {
top: 20%;
}
.box2 {
top: 40%;
}
.box3 {
top: 60%;
}
.box4 {
top: 80%;
}
<div class="body-component width-medium height-medium">
<span class="snippet-title">Box loading animation</span>
<div class="code-snippet center">
<div class="boxes">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</div>
</div>
That said, you could use flexbox to achieve this layout without having to know the number of the boxes in advance for the purpose of vertical spacing.
html,
body {
margin: 0;
padding: 0;
color: #248b98;
font-family: "Open Sans", sans-serif;
}
.body-component {
background-color: black;
height: 100vh;
border: 10px solid #ff6d00;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-betwen;
align-items: center;
min-height: 500px;
}
.snippet-title {
flex: 0 1 auto;
text-decoration: underline;
padding: 10px;
}
.code-snippet {
flex: 1 1 auto;
display: flex;
}
.boxes {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 15px;
}
.box {
width: 30px;
height: 30px;
background-color: #056ab3;
}
<div class="body-component">
<span class="snippet-title">Box loading animation</span>
<div class="code-snippet">
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Try this... add transform: translate(-50%, -50%); to box classes
.body-component {
position: relative;
margin: 10px;
color: #000;
display: inline-block;
vertical-align: top;
background-color: #ff6d00;
overflow: auto;
border: 1px solid #D0D3D4;
}
.width-medium {
width: 500px;
}
.height-medium {
height: 400px;
}
.code-snippet {
position: relative;
width: 95%;
height: 95%;
background-color: #000;
}
.snippet-title {
position: absolute;
color: #248b98;
font-family: "Open Sans", sans-serif;
padding: 15px;
text-decoration: underline;
z-index: 1;
}
.center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0px;
}
.boxes {
position: relative;
width: 100%;
height: 100%;
}
.box1 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
.box2 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.box3 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
.box4 {
position: absolute;
width: 30px;
height: 30px;
background-color: #056ab3;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="body-component width-medium height-medium">
<span class="snippet-title">Box loading animation</span>
<div class="code-snippet center">
<div class="boxes">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
</div>
I am rather new to HTML and CSS, and have been struggling to find a solution to a problem. The problem is that .wrapper2 with text and image is overlapping .wrapper1 with subheader. Here is the fiddle https://jsfiddle.net/c85frkjd/ .
Is would really appreciate the help:)
CSS:
.totalWrapper{
width: 964px;
height: auto;
margin-bottom: 250px;
box-sizing: border-box;
padding: 0;
}
.wrapper1{
width: 964px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -50%;
margin-top: -10px;
}
.shrink-wrap{
width: 100vw;
height: 100%;
top: -5%;
position: relative;
overflow: visible;
display: inline-block;
}
.subSubHeaderImage{
width: 100vw;
height: 100%;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right:-50vw;
background: url(http://localhost/wordpress/wp-
content/uploads/2017/04/sandwichmaaler.png) center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
overflow: visible;
}
.subSubHeaderImageTekst h1{
width: 100%;
top: 35px;
align-items: center;
position: absolute;
font-family: "Roboto Slab", sans-serif;
text-align: center;
font-size: 36px;
color: #fff;
z-index: ;
}
.subSubHeaderImageTekst p{
width: 100%;
position: absolute;
top: 95px;
color: #a8adb1;
line-height: 26px;
font-family: "Roboto Slab", sans-serif;
text-align: center;
font-weight: 300;
font-size: 18px;
}
.wrapper2{
width: 964px;
height: auto;
margin: 0;
padding: 30px 0;
position: absolute;
z-index: 1;
}
.kolonne1{
float: left;
width: 100%;
height: auto;
margin-top: 40px;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-gap: 60px;
}
.kolonne1 img{
height: auto;
margin-top: -20px;
width: 85%;
}
HTML:
<div class="totalWrapper">
<div class="wrapper1">
<div class="shrink-wrap">
<div class="subSubHeaderImage">
</div> <!--end of .subSubHeaderImage-->
<div class="subSubHeaderImageTekst">
<h1>texttexttexttext</h1>
<p>texttexttexttextt</p>
</div> <!--end of .subSubHeaderImageTekst-->
</div> <!--end of .shrink-wrap-->
</div> <!--end of .wrapper1-->
<div class="wrapper2">
<div class="kolonne1">
texttexttexttexttexttexttext
<img src="http://localhost/wordpress/wp-
content/uploads/2017/04/burger_lille-300x200.png" alt="burger" width="350"
height="233"/>
</div> <!--end of .kolonne1-->
</div> <!--end of .wrapper2-->
<div class="push">
</div> <!--end of .push-->
</div> <!--end of .totalWrapper-->
They're both absolutely positioned and neither of them has a top. To keep them from overlapping, add position: relative to the parent, and a top value for .wrapper2 that will push it below the height of .wrapper1. Since .wrapper1 is 200px (height) - 10px (negative top margin), the top for .wrapper2 should be 190px
.totalWrapper {
width: 964px;
height: auto;
margin-bottom: 250px;
box-sizing: border-box;
padding: 0;
position: relative;
}
.wrapper1 {
width: 964px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -50%;
margin-top: -10px;
}
.shrink-wrap {
width: 100vw;
height: 100%;
top: -5%;
position: relative;
overflow: visible;
display: inline-block;
}
.subSubHeaderImage {
width: 100vw;
height: 100%;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: url(http://localhost/wordpress/wp-content/uploads/2017/04/sandwichmaaler.png) center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
overflow: visible;
}
.subSubHeaderImageTekst h1 {
width: 100%;
top: 35px;
align-items: center;
position: absolute;
font-family: "Roboto Slab", sans-serif;
text-align: center;
font-size: 36px;
color: #fff;
z-index: ;
}
.subSubHeaderImageTekst p {
width: 100%;
position: absolute;
top: 95px;
color: #a8adb1;
line-height: 26px;
font-family: "Roboto Slab", sans-serif;
text-align: center;
font-weight: 300;
font-size: 18px;
}
.wrapper2 {
width: 964px;
height: auto;
margin: 0;
padding: 30px 0;
position: absolute;
z-index: 1;
top: 190px;
}
.kolonne1 {
float: left;
width: 100%;
height: auto;
margin-top: 40px;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-gap: 60px;
}
.kolonne1 img {
height: auto;
margin-top: -20px;
width: 85%;
}
<div class="totalWrapper">
<div class="wrapper1">
<div class="shrink-wrap">
<div class="subSubHeaderImage">
</div>
<!--end of .subSubHeaderImage-->
<div class="subSubHeaderImageTekst">
<h1>texttexttexttext</h1>
<p>texttexttexttextt</p>
</div>
<!--end of .subSubHeaderImageTekst-->
</div>
<!--end of .shrink-wrap-->
</div>
<!--end of .wrapper1-->
<div class="wrapper2">
<div class="kolonne1">
texttexttexttexttexttexttext
<img src="http://localhost/wordpress/wp-content/uploads/2017/04/burger_lille-300x200.png" alt="burger" width="350" height="233" />
</div>
<!--end of .kolonne1-->
</div>
<!--end of .wrapper2-->
<div class="push">
</div>
<!--end of .push-->
</div>
<!--end of .totalWrapper-->
Since you are positioning .wrapper-1 and .wrapper-2 absolutely, this means you are essentially setting two pieces of paper directly on top of each other in a stack, so they can equally cover each other. If you position them relatively, then it would be like laying each piece of paper side by side on a flat surface. You could move the pieces around so one is above another, but they wouldn't overlap or cover each other unless you added some extra code. They would be positioned around each other. You could say, this piece is beside the other piece, or above or below, but not directly on top of or under. So to fix your issue, you need to change them to be positioned relatively.
How to align the raccoon picture so it appear at the right bottom of the big round picture? As it is at the image.
I tried background-position: bottom right; as well as position: absolute; but it doesn't work.
See the code below.
Thank You.
.p-i--1 {
background-image: url(http://www.zerohedge.com/sites/default/files/pictures/picture-3930.jpg);
}
.p-i {
border-radius: 50%;
background-position: bottom right;
width: 40px;
height: 40px;
position: absolute;
}
.p-1 {
float: left;
width: 220px;
height: 100%;
position: relative;
}
.p-wrap {
bottom: 0;
width: 100%;
text-align: center;
}
.pic-wrap {
width: 122px;
height: 122px;
margin: 0 auto;
}
.p_pic-1 {
background-image: url(http://www.fernomortuary.com/~/media/products-mortuary/swatches/Swatch_Burgundy.ashx?w=122);
background-position: center;
float: left;
width: 122px;
height: 122px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.p-description {
font-family: Roboto;
font-weight: 300;
color: #666;
font-size: 14px;
text-align: center;
float: left;
margin-top: 0;
}
.p-name {
text-align: center;
}
<div class="p-1">
<div class="p-i--1 p-i"></div>
<div class="pic-wrap">
<a class="p_pic-1" href="index.html"></a>
</div>
<div class="p_wrap">
<h4 class="p-name">Some text</h4>
<p class="p-description">Some very very very very long description</p>
</div>
</div>
Put the smaller picture within .pic-wrap. Give it an absolute position and align it using bottom and right properties:
JS Fiddle
CSS Changes made:
.pic-wrap {
position: relative;
}
.p-i {
position: absolute;
bottom: 0;
right: 0;
}
And if you want the white border around the small image:
.p-i {
border: 3px solid white;
}
JS Fiddle
Just add a bottom and right property to your absolute element like this:
.p-i {
border-radius: 50%;
background-position: bottom right;
width: 40px;
height: 40px;
position: absolute;
bottom: 100px;
right: 50px;
}
Here's a snippet with the above codes:
.p-i--1 {
background-image: url(http://www.zerohedge.com/sites/default/files/pictures/picture-3930.jpg);
}
.p-i {
border-radius: 50%;
background-position: bottom right;
width: 40px;
height: 40px;
position: absolute;
bottom: 100px;
right: 50px;
}
.p-1 {
float: left;
width: 220px;
height: 100%;
position: relative;
}
.p-wrap {
bottom: 0;
width: 100%;
text-align: center;
}
.pic-wrap {
width: 122px;
height: 122px;
margin: 0 auto;
}
.p_pic-1 {
background-image: url(http://www.fernomortuary.com/~/media/products-mortuary/swatches/Swatch_Burgundy.ashx?w=122);
background-position: center;
float: left;
width: 122px;
height: 122px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.p-description {
font-family: Roboto;
font-weight: 300;
color: #666;
font-size: 14px;
text-align: center;
float: left;
margin-top: 0;
}
.p-name {
text-align: center;
}
<div class="p-1">
<div class="p-i--1 p-i"></div>
<div class="pic-wrap">
<a class="p_pic-1" href="index.html"></a>
</div>
<div class="p_wrap">
<h4 class="p-name">Some text</h4>
<p class="p-description">Some very very very very long description</p>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/6sxLj3hL/
Your hard coded height on the container wasn't necessary so I removed it.
.p-i--1 {
background-image: url(http://www.zerohedge.com/sites/default/files/pictures/picture-3930.jpg);
}
.p-i {
border-radius: 50%;
background-position: bottom right;
width: 40px;
height: 40px;
float:right
}
.p-1 {
float: left;
width: 220px;
height: 100%;
position: relative;
}
.p-wrap {
bottom: 0;
width: 100%;
text-align: center;
}
.pic-wrap {
width: 122px;
margin: 0 auto;
overflow: auto;
}
.p_pic-1 {
background-image: url(http://www.fernomortuary.com/~/media/products-mortuary/swatches/Swatch_Burgundy.ashx?w=122);
background-position: center;
width: 122px;
height: 122px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: block;
overflow: auto;
}
.p-description {
font-family: Roboto;
font-weight: 300;
color: #666;
font-size: 14px;
text-align: center;
float: left;
margin-top: 0;
}
.p-name {
text-align: center;
}
I rearranged your HTML a bit
<div class="p-1">
<div class="pic-wrap">
<a class="p_pic-1" href="index.html"></a>
<div class="p-i--1 p-i"></div>
</div>
<div class="p_wrap">
<h4 class="p-name">Some text</h4>
<p class="p-description">
Some very very very very long description
</p>
</div>
</div>