is there any way to change position absolute parent?
in this example I want to send red box to position right:0 of his second parent (black box)
.box1{
height:500px;
width:500px;
position:relative;
background:black;
}
.box2{
height:300px;
width:300px;
position:relative;
background:green;
}
.box3{
height:100px;
width:100px;
position:absolute;
background:red;
right:0
}
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
Make Some few changes in your markup
.box1 {
height: 500px;
width: 500px;
position: relative;
background: black;
}
.box2 {
height: 300px;
width: 300px;
position: relative;
background: green;
}
.box3 {
height: 100px;
width: 100px;
position: absolute;
background: red;
right: 0
}
<div class="box1">
<div class="box3"></div>
<div class="box2">
</div>
Related
The div inside another div won't go to the right but just stays to the left. The code below is some what look like chat box the first div with green background has a position of 0px left and it works but the second div has 0px right and it still stick to the left please help me with this it bothers me for 2 day without right solution
<html>
<head>
</head>
<body>
<div style="width:100% height:100%; position: relative; top:0px; left:0px; background-color:white;">
<div style="width:200px; height:100px; position: relative; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: relative; top:10px; right:0px; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
</body>
</html>
position: relative means the div is positioned "relative to itself". So right: 0px just means "move the div 0px to the right of where it would normally be"... not to the right edge of the container.
You could use position: relative on the container, and apply position: absolute to the children instead, but assigning top values will be cumbersome.
Info about position
An alternative might be adding display: flex to the wrapper. Then you can use margin-left: auto to push a div to the right.
.wrapper {
background: lightgrey;
display: flex;
flex-direction: column;
}
div > div {
width: 200px;
height: 100px;
margin-bottom: 10px;
}
.left {
background: green;
}
.right {
background: red;
margin-left: auto;
}
<div class="wrapper">
<div class="left">
<p>1</p>
</div>
<div class="right">
<p>2</p>
</div>
</div>
.parent{
width:100%;
position: relative;
clear: both;
}
.incoming {
float: left;
max-width: 80%;
background-color: #ccc;
padding: 4px;
overflow: auto;
}
.reply {
float: right;
max-width: 80%;
background-color: powderblue;
padding: 4px;
}
<div class="parent">
<div class="incoming"><p>Incoming chat that takes up a maximum of 80%
of screen width.</p></div>
<div class="reply"><p>Reply, that also does the same, but from the right of the screen.</p></div>
</div>
Edited to reflect updated requirement
Using relative element with top, left, bottom and right properties is useless. you have to change it to absolute value.
<div style="width:100% height:100%; position: relative; background-color:white;">
<div style="width:200px; height:100px; position: absolute; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: absolute; top:10px; right:0px; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
UPDATE
here is another way to position elements
<div style="width:100%; height:100px; background-color:white;">
<div style="width:200px; height:100px; float:left; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; float:right; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
UPDATE#2
here is markup for your chat
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.chat {
width: 100%;
background: lightblue;
padding: 10px;
overflow: hidden;
}
.message {
clear: both;
font-family: sans-serif;
color: white;
}
.to, .from {
width: 40%;
padding: 10px;
overflow: hidden;
}
.to {
background: pink;
float: left;
}
.from {
background: lightgreen;
float: right;
}
<div class="chat">
<div class="message">
<div class="to">hi</div>
</div>
<div class="message">
<div class="to">how are u?</div>
</div>
<div class="message">
<div class="from">fine, thnks</div>
</div>
<div class="message">
<div class="to">can u help me?</div>
</div>
<div class="message">
<div class="from">sure, no problem</div>
</div>
</div>
Use float: right; instead of right:0px;.
Here is the code.
<html>
<head>
</head>
<body>
<div style="width:100% height:100%; position: relative; top:0px; left:0px; background-color:white;">
<div style="width:200px; height:100px; position: relative; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: relative; top:10px; float:right; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
</body>
</html>
The image is the goal. I need to position each color correctly within the box. It must also be in the center of the browser. The result I got is exactly what the image is just with words. I'm really looking for a better way to do this because I kind of had to guess the left and bottom pixels. I also know it could have been done better and would really love to learn how.
.border{
border: 2px solid black;
width: 500px;
height: 700px;
margin:25px 450px;
padding: 1px;
}
#one {
background: red;
height:100px;
}
#two{
background: yellow;
height:600px;
width:100px;
}
#three {
background: blue;
height:550px;
width:300px;
position: relative;
left: 100px;
bottom: 600px;
}
#four{
background: yellow;
height: 600px;
width:100px;
position: relative;
left:400px;
bottom: 1150px;
}
#five{
background: green;
height:50px;
width:300px;
position: relative;
left: 100px;
bottom: 1200px;
}
<div class="border">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
<div id="five">Five</div>
</div>
Personally I'd opt for using percentage-based measurements, so that you only need to update the width and height on .border itself. For the .border, I've gone with vw and vh units for the width and height respectively, so that the size of the table adjusts based on the size of the viewport.
Note that you'll also probably want to make use of classes instead of IDs so you can have more than one table. I've used classes in my example, and also replaced the names to make the location identifiers more obvious.
I'd also opt for creating a container for the #middle and #bottom elements, considering them to be a single 'column'. This way, you can make use of float to align the #left, #middle_container and #right columns next to each other, without having to worry about the width of #bottom.
You can center the entire thing by adding margin: 0 auto to .border, which is shorthand for stating that there shouldn't be any vertical margins, and that the horizontal margins should be automatically calculated (which horizontally centers the element in question).
This can be seen in the following:
.border {
border: 2px solid black;
width: 50vw;
height: 100vh;
padding: 1px;
margin: 0 auto;
}
.top {
background: red;
width: 100%;
height: 20%;
}
.left,
.middle_container,
.right {
float: left;
}
.left {
background: yellow;
width: 20%;
height: 80%;
}
.middle_container {
width: 60%;
height: 80%;
}
.middle {
background: blue;
height: 80%;
}
.bottom {
background: green;
height: 20%;
bottom: 0;
}
.right {
background: yellow;
width: 20%;
height: 80%;
}
<body>
<div class="border">
<div class="top">Top</div>
<div class="left">Left</div>
<div class="middle_container">
<div class="middle">Middle</div>
<div class="bottom">Bottom</div>
</div>
<div class="right">Right</div>
</div>
</body>
Hope this helps! :)
To extend #Obsidian Age's answer, you could also achieve this by using css flexbox.
More info:
MDN
CSS-tricks
.border {
border: 2px solid black;
width: 50vw;
height: 100vh;
padding: 1px;
margin: 0 auto;
display: flex;
flex-wrap: wrap
}
.top {
background: red;
height: 20%;
flex: 100%;
}
.left,
.right,
.middle_container,
.middle {
height: 80%;
}
.left,
.right {
background: yellow;
flex: 1
}
.middle_container {
flex: 3;
}
.middle {
background: blue;
}
.bottom {
background: green;
height: 20%;
}
<div class="border">
<div class="top">Top</div>
<div class="left">Left</div>
<div class="middle_container">
<div class="middle">Middle</div>
<div class="bottom">Bottom</div>
</div>
<div class="right">Right</div>
</div>
To center your art you will need to add position,top,left,margin-top, and margin-bottom. to .border;
.border{
position:fixed; /*or absolute*/
top:50%; /* add this */
left:50%; /* add this */
margin-top:-350px; /*half of your height*/
margin-left:-250px; /*half of your width*/
border: 2px solid black;
width: 500px;
height: 700px;
padding: 1px;
}
.border{
position:fixed;
top:50%;
left:50%;
margin-top:-350px;
margin-left:-250px;
border: 2px solid black;
width: 500px;
height: 700px;
padding: 1px;
}
#one {
background: red;
height:100px;
}
#two{
background: yellow;
height:600px;
width:100px;
}
#three {
background: blue;
height:550px;
width:300px;
position: relative;
left: 100px;
bottom: 600px;
}
#four{
background: yellow;
height: 600px;
width:100px;
position: relative;
left:400px;
bottom: 1150px;
}
#five{
background: green;
height:50px;
width:300px;
position: relative;
left: 100px;
bottom: 1200px;
}
<div class="border">
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
<div id="five">Five</div>
</div>
Here is my HTML :
<div id="container">
<div id="red"></div>
<div id="yellow">
<div id="green"></div>
</div>
</div>
Here is my CSS :
#container { height:auto; width:100%; background:orange; float:left; }
#red { height:100%; width:200px; background:red; float:left; position:relative; }
#yellow { height:100%; width:calc(100% - 210px); background:yellow; float:right; position:relative; padding:5px; }
#green { height:300px; width:100%; background:green; }
Here is a sample : https://jsfiddle.net/cc5xL660/
As it is in the jsfiddle, the #red div is invisible. I'm looking for a way to make the #red div visible without a specific height dimension. Of course, I could give a height:300px to the #red div but the #green div is supposed to be dynamic. I would like the #red div to have the same height.
You have to give
position: relative to #container
position: absolute to #red
Your JSFiddle edited: https://jsfiddle.net/cc5xL660/4/
You can use display:flex to do that. Have a look at here
#container {
height: auto;
width: 100%;
background: orange;
float: left;
display:flex;
flex-direction:row;
align-items:stretch;
}
#red {
/*height: 100%;*/
width: 200px;
background: red;
float: left;
position: relative;
}
#yellow {
/*height: 100%;
width: calc(100% - 210px);*/
background: yellow;
float: right;
position: relative;
padding: 5px;
flex:1 0;
}
#green {
height: 300px;
width: 100%;
background: green;
}
<div id="container">
<div id="red"></div>
<div id="yellow">
<div id="green"></div>
</div>
</div>
Fiddle
I want to center a div element and to place another div element just on the right with the same vertical alignment. I don't know how to proceed without centering both elements.
Here is my code.
<div class="container">
<div class="center"></div>
<div class="right"></div>
</div>
.center {
width: 100px;
height: 100px;
margin: auto;
background-color: red;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
}
http://jsfiddle.net/KWsnh/
You could use calc to achieve this:
FIDDLE
.container{
text-align:center;
position: relative;
}
.center {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
position:absolute;
top:0;
left: calc(50% + 50px); // (100% - 100px)/2 + 100px (offset) = 50% + 50px
}
PS: Browser support for calc is quite good these days.
Demo Fiddle
HTML
<div class="container">
<div class='vcenter'>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
CSS
html, body {
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
display:table;
}
.container {
display:table-cell;
vertical-align:middle;
}
.center {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: red;
}
.vcenter {
display:block;
width:100%;
position:relative;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
position:absolute;
right:0;
top:0;
}
<div class="one"><div>
<div class="parent">
<div class="child">
</div>
</div>
Is it possible to have the div with class of one to be above the parent div but below the child div?
Yes, it is possible
here is an example
HTML
<div class="one"> 1 </div>
<div class="parent">
parent
<br/> <br/> <br/> <br/>
<div class="child">
child
</div>
</div>
CSS
.one{
background:yellow;
height:30px;
width:100px;
position:absolute;
top:50px;
}
.parent{
background:green;
height:300px;
width:100px;
}
.child{
background:black;
height:100px;
width:60px;
}
Ok, what about that:
HTML
<div class="one">One
</div>
<div class="parent">Parent
<div class="child">Child
</div>
</div>
CSS
.one {
margin-top: 100px;
background: blue;
height: 200px;
width: 100px;
}
.parent {
background: yellow;
height: 100px;
width: 100px;
position: relative;
}
.child {
position: absolute;
background: green;
height: 100px;
width: 100px;
top: -300px;
}
Check it out here.
This way is even shorter:
.one { margin-top: 100px; }
.child { width: 100%; height: 100px; position: absolute; top: 0; }
See an example here: http://codepen.io/zitrusfrisch/pen/AzBfv