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>
Related
Im currently trying to make a square with 4 small squares inside, and I have been having troubles with a way I was trying to do.
So this is the code:
#grandbox {
position: absolute;
width: 204px;
height: 204px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
<div id="grandbox">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
I wanted to make the css style of the borders:
border: 2px solid black
But if I do that the boxes just break out of the bigger box and are display vertically.
I'm pretty newbie with this, as I currently started my carreer, but I cannot understand why doesn't it work.
PS: Sorry if bad english, not my first language.
Normally, border widths are added to the given width. With the box-sizing: border-box; rule, you can include the border into the width, so that you have no break anymore. See this snippet:
#grandbox {
position: absolute;
width: 200px;
height: 200px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
box-sizing: border-box;
}
<div id="grandbox">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
See https://developer.mozilla.org/de/docs/Web/CSS/box-sizing for more information about box-sizing.
EDIT: My answer is more of a hack solution. The accepted answer above that incorporates the box-sizing automatically including borders into the width is a better answer.
In your original calculation of height and width (204) I don't think you were accounting for both sides of each square being an additional 4 pixels larger.
Adjusting the width and height to 208px should solve your problem.
#grandbox
{
position: absolute;
width:208px;
height:208px;
border: 2px solid black;
left:40%;
top: 8%;
}
div.smallbox
{
border: 2px solid black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
<body>
<div id="grandbox">
<div class="smallbox">
</div>
<div class="smallbox">
</div>
<div class="smallbox">
</div>
<div class="smallbox">
</div>
</div>
</body>
The outer box should be positioned relative and the four inside boxes absolute. Then you just need to position them using left right top bottom properties.
#grandbox {
position: relative;
width: 204px;
height: 204px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
position: absolute;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
div.sb1 {
top: 0;
left: 0;
}
div.sb2 {
top: 0;
right: 0;
}
div.sb3 {
left: 0;
bottom: 0;
}
div.sb4 {
right: 0;
bottom: 0;
}
<div id="grandbox">
<div class="smallbox sb1">
</div>
<div class="smallbox sb2">
</div>
<div class="smallbox sb3">
</div>
<div class="smallbox sb4">
</div>
</div>
Here's a jsbin version.
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>
<div>
header
</div>
<div>
sidebar
</div>
<div>
content
<img src="prev.png">
<img src="next.png">
</div>
how do I fix the arrow in the center of the div content to the right and left?
http://jsfiddle.net/shvj40ta/embedded/result/
SOLUTION
The question below helped me understand about override:
How to override "inherited" z-indexes?
I put the z-index in div arrows, not in children divs
With the help of user #justinas I got the solution
http://jsfiddle.net/gislef/3by7r0ek/1/
With css 'position: absolute; top: 50%; margin-top: -(height / 2)';
.wrapper {
background-color: rgba(0, 0, 0, .2);
position: relative;
margin: 10px auto;
height: 200px;
width: 300px;
}
.left,
.right {
width: 0;
height: 0;
border: 20px solid transparent;
position: absolute;
top: 50%;
/* actual height is 40 */
margin-top: -20px;
}
.left {
border-right-color: black;
left: 5px;
}
.right {
border-left-color: black;
right: 5px;
}
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
I really need your help,
I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?
Here is the CSS markup:
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
display: none;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
}
#text {
height: 100%;
border: 1px solid red;
}
HTML:
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
</div>
Here is a snapshot of the problem:
The height of #text is 100% which means it gets the height of the containing block, in this case #container. Both the height of #text as well as the #container are 500px. But #text is being pushed down by it's sibling .topbar, causing it to overflow.
To solve this you can use the css property overflow:auto as suggested by Jarred Farrish in the comments
Because #test {height:100%;} it will look for it's parent's height, all the way to #wrapper which is set to height:100px, so #test will get the same height, plus the borders, and the #container doesn't have enough space to hold it (due to the extra blue bar), so it overflows.
I also noticed the layout can be done simpler as follows.
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-bottom: -50px; /*half height*/
margin-right: -250px; /*half width*/
position: absolute;
/* display: none; */
}
#container {
background: #FFF;
border: 2px solid rgb(100, 139, 170);
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100, 139, 170);
padding: 4px;
font-weight: bold;
}
#text {
border: 1px solid red;
}
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div>
<div class="topbar" style="text-align: right;">Close</div>
<div id="text">
<p>test</p>
</div>
</div>
</div>
You are taking the height of the #container but remember that there is also sort of a header at the top of the container so the text height should be < 100% because you have to substract the height of the dialog header.
Amir got point, the way you can "fix" this is to add padding to content, so you got safe space.
CodePen Sample
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
#wrapper{
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-right: -250px;
position: absolute;
border: 1px solid yellow;
}
#container {
background: #FFF;
left: 0%;
padding-bottom: 30px;
top: 0%;
margin: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
border: 1px solid green;
}
#text {
height: 100%;
border: 1px solid red;
}
I also fixed positioning for you.
The title isn't very descriptive, but basically I want to create something like this with HTML and CSS:
I can do the horizontal line by wrapping the first row of boxes in a div and setting the background image for that to the line, but I'm not sure how I can group the column of boxes and add a vertical line behind them.
Any help is appreciated!
Here you go DEMO
<div id="container">
<div id ="horizontal">
<div id="border2"></div>
</div>
<div id="vertical">
<div id="border"></div>
</div>
</div>
#container {background: black;
width: 300px;
height: 300px;
margin: 0 auto;
position:relative
}
#vertical {background: white;
position: absolute;
width: 70px;
left: 40% ;
height: 300px;
top:0;
}
#horizontal {background: white;
position: absolute;
height: 60px;
top:40%;
left:0;
width: 100%;
}
#border {
width: 100%;
height: 150px;
margin-top: 60px;
border-top: 2px dashed black;
border-bottom: 2px dashed black;
}
#border2 {
width: 80%;
height: 60px;
border-right: 2px dashed black;
}