Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 hours ago.
Improve this question
Is there a way to draw with CSS broken line between two divs? Like in picture white line.
Add center div between to two box.
Add ::before and ::after pseudo element to make zig line.
Adjust size according to your need.
.top-box,
.bottom-box {
width: 300px;
height: 150px;
background-color: green;
position: relative;
}
.top-box {
margin-left: 200px;
margin-bottom: 100px;
}
.bottom-box {
margin-top: 100px;
}
.zig-line {
width: 200px;
height: 3px;
margin-left: 150px;
background-color: red;
position: relative;
}
.zig-line::after,
.zig-line::before {
content: "";
position: absolute;
width: 3px;
height: 100px;
background-color: red;
}
.zig-line::before {
left: 0;
}
.zig-line::after {
right: 0;
bottom: 0;
}
<div class="top-box" style="background-color: blue;"></div>
<div class="zig-line"></div>
<div class="bottom-box"></div>
Related
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 12 months ago.
Vertical margins by default do overlap, for instance if I have one div with bottom margin set to 20px, and the next div top margin to 30px the space between the two div`s should be 30px.
Im my case they do not overlap:
#contentwrap {
margin-bottom: 50px;
background: blue;
width: 100%;
height: 100px;
}
#pagenavi {
display: inline-block;
margin-top: 50px;
background: blue;
width: 100%;
height: 100px;
}
<div id = "contentwrap"></div>
<div id = "pagenavi"></div>
That's because margin collapse only happens vertically. By setting display: inline-block, this breaks the rule since the lower element may try to stick with the element above it.
More information can be found at here.
Could you show a specific problem so we can tackle it together?. Since styling display: inline-block; with width: 100% doesn't make any sense
#contentwrap {
margin-bottom: 50px;
background: blue;
width: 100%;
height: 100px;
}
#pagenavi {
margin-top: 50px;
background: blue;
width: 100%;
height: 100px;
}
<div id = "contentwrap"></div>
<div id = "pagenavi"></div>
This question already has answers here:
Why does position:relative; appear to change the z-index?
(2 answers)
How does z-index work with its default values?
(1 answer)
All About.... Z-Index?
(4 answers)
How does the z-index property really work?
(5 answers)
Closed 1 year ago.
I try to learn how to use pseudo elements in CSS and I am facing a problem. I try to create a container that contains some text and a pseudo element.
But I wan't the pseudo element to be behind the elements text but before the background color. I don't know how to achieve this.
I want the pseudo element to be part of and before the background color. But to be behind the containers actual content.
Here is a short snippet of the exact problem I am facing:
.container {
height: 10rem;
background-color: blue;
color: white;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: 3rem;
background-color: red;
}
<div class="container">
<h1>This is a title</h1>
</div>
Just set z-index to childs of container.
.container {
height: 10rem;
background-color: blue;
color: white;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: 3rem;
background-color: red;
}
.container>* {
position: relative;
z-index: 2;
}
<div class="container">
<h1>This is a title</h1>
</div>
This question already has answers here:
Border length smaller than div width?
(13 answers)
Closed 6 years ago.
I need help on border-bottom length. I want to set border-bottom length to 60%. I can do it using the inner div like:
#myDiv {
background: #FED;
_border-bottom: 5px solid red;
}
#myDiv div {
margin: 5px 0px;
width: 60%;
height: 5px;
background-color: red;
}
<div id="myDiv">
My div
<div></div>
</div>
But i don't want to use it with extra div, I want to achieve it using border-bottom, I search for this in google and stack but no luck.
Thanks in advance.
You can use pseudo element like this:
#myDiv {
background: #FED;
position: relative;
}
#myDiv::after {
content: "";
width: 60%;
height: 5px;
background: red;
position: absolute;
bottom: -5px;
left: 0;
}
<div id="myDiv">
My div
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This is the code, you can see what is wrong easily.
#wrap {
text-align: center;
height: auto;
margin: 0 auto;
width: 1024px;
background: #CCC;
}
#sidebar {
height: auto;
width: 300px;
padding: 20px;
margin-top: 60px;
padding-bottom: 100px;
border: outset;
float: right;
overflow: auto;
}
#content {
border: outset;
overflow: auto;
width: 500px;
height: auto;
padding: 20px;
margin-top: 60px;
padding-bottom: 100px;
clear: left;
}
<div id="wrap">
<div id="sidebar">Some text here</div>
<div id="content">Some text here</div>
</div>
I have a sneaky suspicion that it has to do with float: right, but I can't get the sidebar to stay on the right side without it.
I want the wrap to expand to the height of whatever is inside it, which is why I set height: auto but it's not working, please help.
Add this css proprty to this ID
#content{
float: left;
}
This question already has answers here:
CSS overflow hidden with absolute position
(3 answers)
Closed 8 years ago.
Why my div positioned as absolute didn't get out of the flow and get hidden by a mom div her overflow set to hidden ?
How can i show my div positioned to absolute ?
here's a FIDDLE
HTML :
<div class="div1">
<div class="div2">
<div class="div3">ccccc</div>
</div>
</div>
CSS :
.div1 {
overflow: hidden;
width: 60px;
height: 20px;
background-color: antiquewhite;
}
.div2 {
position: relative;
}
.div3 {
position: absolute;
right: -10px;
}
Your problem is with your "div3" class.
Try this:
.div3 {
position: absolute;
}
That should fit nicely.
Now if you want it to be centered, then just go:
.div3 {
position: absolute;
width: 100%;
text-align: center;
}
EDIT:
If you insist, then the easiest will be to have a counter on the same element. Try this then:
.div3 {
position: absolute;
right: -10px;
padding-right: 10px;
}
Hope this helps.