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>
Related
How to position divs above the intersection of 2 other divs ?
I did try with relative and absolute positioning. But wasn't able to achieve a good result.
I have tried with relative and absolute positions in div1, div3 and I kept div3 inside div1 and increased its height. But after I placed the contents in div2 and tried to do a similar structure, the alinment got completly distorted.
Can anyone please help me with some better approach? Can it be acheived by css grids ?
Use this code.. it will help you....
.div1 {
background-color: yellow;
height: 100px;
border: 1px solid #000;
position: relative;
}
.div-2-half {
background-color: #fff;
height: 100px;
border: 1px solid #000;
width: 49%;
float: left;
}
.div2 {
width: 80%;
margin: 0 auto;
position: absolute;
background: transparent;
left: 0;
right: 0;
bottom: 41px;
}
.div3 {
background-color: #fff;
height: 100px;
border: 1px solid #000;
}
.div4 {
width: 100px;
border: 1px solid #000;
position: absolute;
left: 23px;
}
.div-container {
position: relative;
}
<div class="div1">
<p>div 1</p>
</div>
<div class="div-container">
<div class="div2">
<div class="div-2-half">
<p>div 2</p>
<div class="div4">div4</div>
</div>
<div class="div-2-half"><p>div 2</p></div>
</div>
<div class="div3"><p style="text-align:center; padding-top: 50px;">div 3</p></div>
</div>
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;
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;
}
I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).
How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.
Code (unfortunately I cannot jsfiddle this as their servers are read only atm):
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: right;
}
Use a negative margin-right on the left box so that the right box is allowed to overlap:
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
margin-right:-104px;
}
The 104 pixels is the overlap amount plus 4px for borders.
Here's a jsfiddle.
You can only do that with positioning.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#right {
width: 250px;
border: 1px solid #ccc;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
You could create the divs with absolute position and add a positive z-index to the one you want to be in front.
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
Can you add an extra div in there?
<div id="container">
<div id="left">
<div id="left-inner">left</div>
</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
}
#left {
float: left;
width: 0px;
overflow:visible;
}
#left-inner {
float: right;
width: 250px;
}
#right {
width: 250px;
}
</style>
Make container bigger so both fit. Then use position relative and left: -100px or whatever on the one on the right.
Excellent Solution: http://jsfiddle.net/A9Ap7/237/
So, dont use:
MARGIN-LEFT:100px...
==
or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems!
so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.
Try this one:
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
margin-left: 150px;
position: absolute;
}
</style>
How about pulling the right div with negative margin. Something like this?
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
position: relative;
width: 400px;
height: 110px;
background-color: #eee;
}
#left {
width: 250px;
height: 100px;
border: 1px solid green;
float: left;
}
#right {
position: relative;
float: right;
width: 250px;
height: 100px;
top: -100px;
border: 1px solid red;
}
My HTML:
<div id="main">
<div id="inner_div"></div>
</div>
CSS:
#main{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 10px auto;
position: relative;
}
#inner_div{
width: 200px;
height: 200px;
border: 1px solid red;
}
As you can see, now #main will center in the page, I can't change the style of #main. I can change the style of #inner_div, I want to make it at the left of the page, so I change the CSS to:
#inner_div{
width: 200px;
height: 200px;
border: 1px solid red;
z-index: 2012;
position: absolute;
left: 10px;
top: 10px;
}
But #inner_div is still in #main 's range:
My question is, how could I change the CSS of #inner_div but not #main to make #inner_div break the bound of #main ? Fiddle: http://jsfiddle.net/9EYP6/1/
Use negative positioning parameters, e.g.
left: -10px;
top: -10px;
#wong2; may you have to give positon in negative
#inner_div{
width: 200px;
height: 200px;
border: 1px solid red;
z-index: 2012;
position: absolute;
left: -10px;
top: -10px;
}