I have two div's inside a parent div. I want to place the divs so that the div 1 position is absolute at bottom:0 of parent div, and the div 2 is always on the top of the div 1.
I am using absolute position to place the divs. However the problem is that the div 1 has variable height. How can I place the div 2 on the top of the div 1 in that case?
Please see the attached image:
I am trying this, but it does not work:
HTML:
<div class="box">
<div class="wrap">
<div class="box2">box 2</div>
<div class="box1">box1</div>
</div>
</div>
CSS:
.box{
width: 200px;
height: 200px;
background: green;
position: relative;
}
.wrap{
position: absolute;
bottom: 0;
border: 1px solid blue;
}
.box1{
background: yellow;
height: 50px;
position: relative;
}
.box2{
background: red;
position: absolute;
top: 0;
}
Demo:
http://jsfiddle.net/P46ht/
You're almost there.
Try this - basically removing the positions from the boxes, and setting the width on .wrap:
.wrap{
position: absolute;
bottom: 0; left:0;right:0;
border: 1px solid blue;
}
.box1{
background: yellow;
}
.box2{
background: red;
}
Example: http://jsfiddle.net/P46ht/1/
Try it like that (DEMO):
.wrap{
position: absolute;
bottom: 0;
width: 100%;
border: 1px solid blue;
box-sizing: border-box;
}
.box1{
background: yellow;
}
.box2{
background: red;
height: 50px;
}
Related
if I have two divs on my page. One has fixed positioning at the top of the page style="position:fixed; left:0; top:0;right:0;" and one has fixed positioning to the left of the page style="position:fixed; left:0; top:0;bottom:0;" is there any way to have the left div positioned so it's top edge lines up with the bottom edge of the top positioned div without hard coding margins or padding? By default there will be some partial overlap
Placing both the div in another container div and defining the position:fixed style to the container div would solve your issue.
<div style="position:fixed;top:0;left:0;right:0;">
<div>div 1</div>
<div>div 2</div>
</div>
Try this
.div0{
position: relative;
width: 600px;
height: 400px;
background: blue;
perspective: 100px;
}
.div1{
position:fixed; left:0; top:0;right:0;
width: 200px;
height: 200px;
background-color: red;
}
.div2{
position:fixed; left:200; bottom:0;
width: 200px;
height: 200px;
background-color: green;
}
<div class="div0">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
Try this, I think you want to do the same.
.parent{
position: relative;
background-color: #000;
width: 600px;
height: 400px;
}
.child1,.child2{
position: absolute;
left: 0;
background-color: #f00;
height: 190px;
}
.child1{
top: 0;
right: 0;
}
.child2{
bottom: 0;
width: 200px;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
If the top div has a defined height, you can simply take that value and use if for the left DIVs top setting:
.top,
.left {
position: fixed;
}
.top {
top: 0;
left: 0;
right: 0;
height: 100px;
background: red;
}
.left {
top: 100px;
bottom: 0;
left: 0;
width: 150px;
background: green;
}
<div class="top"></div>
<div class="left"></div>
Convert the boxes into cocentric circles (circles within each other that share the same center). The outer circle should be black with a size of 300px and the inner circle should be white with a size of 200px.
html:
<div id="p10">
<div id="outer">
<div class="rectangle" id="inner"></div>
</div>
css:
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 300px;
height: 300px;
border-color: #000;
position: absolute;
}
#p10 #inner {
background-color: #fff;
border-color: #fff;
border-radius: 100%;
width: 200px;
height: 200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
The css works only if #p10 #outer position's absolute. I'm kind of confused on why this is so. Does this mean that any time I want a subelement position's to be absolute, all of the parent's positions must be absolute?
The position of a position:absolute element is relative to the closest container with which the position is set to either absolute, relative, or fixed, otherwise it is relative to the viewport.
It can also be relative to the initial containing block if none of the top, right, bottom, or left offset value was specified.
There could be more possibilities, you can learn more on W3C, and MDN.
just change the position relative of parent div
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 300px;
height: 300px;
border-color: #000;
position: relative;
}
I would suggest to use position:absolute for the outer and position:relative for the inner. Then, set the border-radius property at half the width in pixels. Percentage in border-radius could cause some problems. Naturally you need to center the inner, so give it these properties.
#inner {
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
position:relative;
width:200px;
border-radius:100px;
}
Absolute/relative might not be neede here , at least relative for inner content.
you can also relay on padding and mind box-sizing:
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 200px;
height: 200px;
padding:50px;
border-color: #000;
/*position: absolute;*//* did you need it ? it will work the same for the child; */
box-sizing:content-box; /*make sure padding is not included in size calculation*/
}
#p10 #inner {
background-color: #fff;
border-color: #fff;
border-radius: 100%;
width: 200px;
height: 200px;
}
<div id="p10">
<div id="outer">
<div class="rectangle" id="inner"></div>
</div>
you can also relay on marging and mind collapsing margins:
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 300px;
height: 300px;
border-color: #000;
/*position: absolute;*//* did you need it ? it will work the same for the child; */
padding:1px; /* mind [collapsing margins][1] */
}
#p10 #inner {
background-color: #fff;
border-color: #fff;
border-radius: 100%;
width: 200px;
height: 200px;
margin:50px;
}
<div id="p10">
<div id="outer">
<div class="rectangle" id="inner"></div>
</div>
You may also use flex :
#p10 #outer {
border-radius: 100%;
background-color: #000;
width: 300px;
height: 300px;
display:flex;
align-items:center;
justify-content:center;
border-color: #000;
/*position: absolute;*//* did you need it ? it will work the same for the child; */
}
#p10 #inner {
background-color: #fff;
border-color: #fff;
border-radius: 100%;
width: 200px;
height: 200px;
}
<div id="p10">
<div id="outer">
<div class="rectangle" id="inner"></div>
</div>
You can also use a single box
.circle {
/* diplay, float, position, .. whatever is needed to be inserted mong the rest of your document styles*/
margin:55px;
height:200px;
width:200px;
border:solid;
box-shadow:0 0 0 50px gray, 0 0 0 53px;
border-radius:50%;
<div class="circle"></div>
It's kind of hard to explain, so to make it easier I made this sketch:
I basically have two divs one outer div and one div inside that div. What i want to do is, I kind of want to add a line between the 2 divs. Is this possible and how should i approach this?
Like this?
#outer {
width: 400px;
height: 300px;
border: 1px solid red;
}
#inner {
height: 125px;
border: 1px solid blue;
position: relative;
}
#line {
position: absolute;
width:1px;
height: 50px;
bottom: -25px; /*half the height*/
left: 50%;
border-left: 1px solid green;
}
<div id="outer">
<div id="inner">
<div id="line"></div>
</div>
</div>
The outer div is nothing special.
The inner div gets a relative position and the line div a absolute position.
By making the line div as child and the positions as mentioned above, the position gets defined relative to it's parent. So when using left: 50% that means, on 50% of the parent.
Andrews alternativ
#outer {
width: 400px;
height: 300px;
border: 1px solid red;
}
#inner {
height: 125px;
border: 1px solid blue;
position: relative;
}
#inner:after {
content: '';
position: absolute;
width:1px;
height: 50px;
bottom: -25px; /*half the height*/
left: 50%;
border-left: 1px solid green;
}
<div id="outer">
<div id="inner">
</div>
</div>
How to make the green div wrap around the blue and yellow divs (his children)
in this particular problem:
https://jsfiddle.net/y74ueuLa/
HTML
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
CSS
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
}
#one {
width: 100%;
height: 150px;
background-color: blue;
position: absolute;
z-index:-1;
}
#two {
position: relative;
top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
}
The green div is wrapped around the blue div. It just doesn't appear that way because the blue div is on top.
With div #two you're positioning it relatively with top 100px. When you position something relative, you're moving the visual component of the div relative to where it would naturally fall in the browser. It's equivalent to saying "visually move down 150px from where you are". You could just make the green div taller, but I don't think that's what you're going for.
I think what you're trying to do (and please correct me if I'm wrong), is this:
https://jsfiddle.net/dk6L1zLL/
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
padding-top:10px;
padding-bottom:10px;
}
#one {
//width: 100%;
height: 150px;
background-color: blue;
//position: absolute;
z-index:-1;
margin:0 10px 0;
}
#two {
//position: relative;
//top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
/*margin-bottom: 500px;*/
}
#footer {
height: 100px;
background-color: red;
width: 100%;
position: relative;
z-index: -3;
}
<body>
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
</body>
I got rid of a lot of the positioning rules and added some margin and padding.
I would like to know if I can only have one of my 2 divs being hidden but not the other one
http://codepen.io/LeaFrontend/pen/yyNbeb
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 300px;
height: 100px;
overflow:hidden;
}
.box1 {
position: absolute;
width: 40px;
height: 40px;
border: 1px solid green;
top: 90px;
}
.box2 {
position: absolute;
width: 40px;
height: 40px;
border: 1px solid blue;
left: 290px;
}
I need to keep the same structure
Not sure if that is possible
Here's what you do:
A. Kill the overflow property in the .container block of CSS code.
B. Then use the values for top, bottom, left and right properties to make it overflow to the direction that you want.
C. Use negative value for for the area you want it to overlap. If you want box1 to overlap to the right by 100px, set the right property value -100px.
right: -100px;