I am trying to create an overlay similar to this image but can't seem to figure it out.
I tried using the absolute positioning but it doesn't seem to work for more than 1 child element.
Any way around this, please?
body, html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.parent {
border: 2px solid #0074d9;
color: #0074d9;
padding: 20px;
width: 100%;
}
.element {
border: 1px dotted #000;
background-color: #eee;
padding: 20px;
color: #000;
position: absolute;
width: 40%;
}
.element2 {
border: 1px dotted #000;
background-color: #eee;
padding: 20px;
color: #000;
position: absolute;
width: 40%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="parent">
Parent element
<div class="element">Child element</div>
<div class="element2">Second Child element</div>
</div>
</body>
</html>
Here's a brief take on it.
I set the main container to position: relative;, so that any position: absolute; children are positioned relatively to the parent.
I make a child-container to hold all the children, and place it at the bottom (and slightly extending out of) the main container, by doing top: 100%; combined with transform: translateY(-50%);. This also has display: flex; on it, so that its children will align themselves side-by-side.
You can add or remove children as necessary and it will automatically accommodate.
.container {
position: relative;
height: 125px;
background-color: #42b6f4;
}
.container>.main-text {
padding: 20px;
color: white;
font-family: Arial;
font-size: 24px;
}
.child-container {
position: absolute;
display: flex;
justify-content: space-between;
width: 100%;
top: 100%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.child-container > .child {
flex-grow: 1; /* Children should grow to fill unoccupied space */
padding: 20px;
margin: 20px; /* Amount of space between children */
border: 1px solid #ccc;
background-color: white;
border-radius: 5px;
}
<div class="container">
<div class="main-text">This is some main text</div>
<div class="child-container">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
</div>
Below is a version with borders on all elements, as to explain the concept a bit.
.container {
position: relative;
height: 125px;
border: 2px solid red;
margin-bottom: 60px;
}
.container>.main-text {
padding: 20px;
color: white;
font-family: Arial;
font-size: 24px;
}
.child-container {
position: absolute;
display: flex;
justify-content: space-between;
top: 100%;
left: 50%;
width: 100%;
transform: translateY(-50%) translateX(-50%);
border: 2px dotted green;
}
.child-container > .child {
flex-grow: 1; /* Children should grow to fill unoccupied space */
padding: 20px;
margin: 20px; /* Amount of space between children */
border: 2px dashed blue;
border-radius: 5px;
}
<div class="container">
<div class="main-text">This is some main text</div>
<div class="child-container">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<span style="color: red;">Parent Container</span><br>
<span style="color: green; margin-left: 15px;">Child Container</span><br>
<span style="color: blue; margin-left: 30px;">Child</span>
Your second child element is on top of the first child element.
1) Add position : relative to parent element
2) You have to use top, bottom, left, right css attributes to place your children elements wherever you want.
body, html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.parent {
border: 2px solid #0074d9;
color: #0074d9;
padding: 20px;
width: 100%;
position : relative;
}
.element {
border: 1px dotted #000;
background-color: #eee;
padding: 20px;
color: #000;
position: absolute;
width: 40%;
top : 20;
right : 0;
}
.element2 {
border: 1px dotted #000;
background-color: #eee;
padding: 20px;
color: #000;
position: absolute;
width: 40%;
top : 20;
left : 20;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="parent">
Parent element
<div class="element">Child element</div>
<div class="element2">Second Child element</div>
</div>
</body>
</html>
Related
I'm looking for advice on how to approach the layout as shown in this image.
I'm not sure if flex alone can handle the overlapping green dotted boxes (using a transform?) or if the blocks should be flex boxes and the green dotted overlapping boxes should just be relatively positioned divs? The mobile version is fairly straight-forward as there's no overlapping involved but I'm unsure how to 'slice' the design up so the CSS can handle both situations.
Below is an initial attempt using transform: scale.
.flex-box-row {
display: flex;
justify-content: space-between;
}
.flex-box-row-box {
border: 1px dashed red;
width: 30%;
text-align: center;
min-height: 200px;
}
.flex-box-dots {
max-height: 50px;
border: 1px dashed green;
transform: scale(1.5, 1);
}
.flex-box-dots::after {
content: "..................";
letter-spacing: 4px;
font-size: 18px;
color: black;
margin-left: 10px;
}
<div class="flex-box-row">
<div class="flex-box-row-box">
BLOCK 1
</div>
<div class="flex-box-dots"></div>
<div class="flex-box-row-box">
BLOCK 2
</div>
<div class="flex-box-dots"></div>
<div class="flex-box-row-box">
BLOCK 3
</div>
</div>
You can get the overlapping effect by using negative margin! Here's an example:
.container {
display: flex;
}
.red {
width: 100px;
height: 100px;
border: 2px dotted red;
}
.green {
width: 150px;
height: 20px;
border: 2px dotted green;
margin: 0 -30px;
background-color: white;
z-index: 1;
}
#media (max-width: 500px) {
.container {
flex-direction: column;
align-items: center;
}
.green {
width: 20px;
height: 150px;
margin: 0;
}
}
<div class="container">
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</div>
I need your help. I've this three boxes including a text below:
#boxes {
display: flex;
margin-right: -20px;
}
.box {
width: 33.33333%;
margin-right: 20px;
height: 300px;
border-radius: 3px;
border: 1px solid;
}
#footer {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25px;
}
#headline {
font-size: 16px;
font-weight: 700;
padding-bottom: 12px;
}
<div id="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="footer">
<span id="headline">Headline</span>
<span>Small text</span>
</div>
Now I need to somehow connect the boxes together with the text below. For that I want to draw a line down and to the middle text (vertical center) from the left and right box. The problem is that the lines should start at the middle of the left and right boxes and be also centered when the width of the boxes changes - for example when I resize the browser (responsive).
I've first tried using ::before and ::after but I was only able to draw the horizontal lines with total imperfection...
Does anyone has an idea how I can do this?
Go ahead and create a DIV underneath, margin it up, and add borders! You can add a background to the text to section it out.
Big thanks to XLIME for the right hint. This is the answer for my problem:
#boxes {
display: flex;
margin-right: -20px;
}
.box {
width: 33.33333%;
margin-right: 20px;
height: 300px;
border-radius: 3px;
border: 1px solid;
}
#footer {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25px;
position: relative;
}
#footer-inner {
display: flex;
flex-direction: column;
align-items: center;
background: #ffffff;
z-index: 1;
padding: 0 25px;
}
#headline {
font-size: 16px;
font-weight: 700;
padding-bottom: 12px;
}
#connection-border {
position: absolute;
width: 68%;
height: 98%;
border: 3px solid;
border-top: none;
top: -25px;
}
<div id="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="footer">
<div id="footer-inner">
<span id="headline">Headline</span>
<span>Small text</span>
</div>
<div id="connection-border"></div>
</div>
While the "just make another <div> with borders" answer will probably make your life easier, here's an example built with pseudoelements.
In short, it hangs both the vertical and the horizontal lines off of the first and last .box elements, and makes use of both the :before and :after pseudoelements to create those lines.
The last bit of the illusion (lines stopping before the footer text) is accomplished by setting a page-color background on the footer spans, and giving them enough padding to create the appearance of a gap.
In this snippet, I've made the vertical lines green and the horizontal lines blue so it's easier to trace what's happening.
/* Original styling ===================== */
#boxes {
display: flex;
margin-right: -20px;
}
.box {
width: 33.33333%;
margin-right: 20px;
height: 300px;
border-radius: 3px;
border: 1px solid;
}
#footer {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25px;
}
#headline {
font-size: 16px;
font-weight: 700;
padding-bottom: 12px;
}
/* Additional styling ===================== */
:root {
--footer-gap-height: 48px;
}
.box {
position: relative;
}
/* vertical lines */
.box:first-child:before,
.box:last-child:before {
border-left: 1px solid #0f0; /* green */
content: '';
display: block;
height: var(--footer-gap-height);
left: 50%;
position: absolute;
top: 100%;
transform: translateX(-50%);
width: 0;
}
.box:first-child:after,
.box:last-child:after {
border-bottom: 1px solid #00f; /* blue */
content: '';
position: absolute;
top: calc(100% + var(--footer-gap-height));
width: 100%;
}
.box:first-child:after {
left: 50%;
right: auto;
}
.box:last-child:after {
left: auto;
right: 50%;
}
#footer {
position: relative;
}
#footer span {
background-color: #fff;
display: block;
padding-left: 1em;
padding-right: 1em;
}
<div id="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="footer">
<span id="headline">Headline</span>
<span>Small text</span>
</div>
I have vertically aligned a circle within a rectangle div. Now, I need that circle to be positioned on the right-border of the parent div while also maintaining responsiveness. In other words, if that parent div resizes its width, the circle should remain glued to the right-border.
Here is an example of how I want the circle positioned:
Here is a JSFiddle of what I have so far. https://jsfiddle.net/jqvf8t2L/
HTML
<div class="outer">
<span>My Text</span>
<div class="circle">
</div>
</div>
CSS
.outer {
display: flex;
align-items: center;
padding: 20px;
position: relative;
border: 1px solid black;
width: 40%;
}
.circle {
border: 1px solid blue;
border-radius: 50%;
height: 20px;
width: 20px;
background-color: white;
}
span {
display: flex;
align-self: flex-start;
}
I have tried putting align-self: flex-end on the circle element and absolutely positioning the circle element to no avail.
Any help would be greatly appreciated!
Try it this way
.outer {
padding: 20px;
position: relative;
border: 1px solid black;
width: 40%;
}
.circle-holder {
position: absolute;
display: flex;
align-items: center;
right: -10px; /** half your outer padding **/
height: 100%;
top: 0;
}
.circle {
border: 1px solid blue;
border-radius: 50%;
height: 20px;
width: 20px;
background-color: white;
}
<div class="outer">
<span>My Text</span>
<div class="circle-holder">
<div class="circle">
</div>
</div>
</div>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
.container{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 140;
}
.a{
margin-top: 10px;
height: 17px;
}
.b{
//??
height: 40px;
}
.c{
margin-bottom: 10px;
height: 18px;
}
I have three <div>s a, b and c in the container <div>. I want an element a to be positioned 10px to the top of the container, b to be positioned 50px to the top of the container and c to be positioned 10px to the bottom of the container.
How should I set b's style in order to achieve this? I want to avoid using absolute position if possible since when I tried to use it, somehow the width of b changed. I want to know if there is a way to set a customized distance between children of a flexbox.
Its easier that you adjust the distances here with margins - so you can remove justify-content: space-between.
Add margin-top: 23px to b and margin-top: auto to c. Check the below demo (you can inspect the red lines to verify that the distances are correct):
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
/*justify-content: space-between;*/
height: 140px;
border: 1px solid;
position: relative;
}
.a {
margin-top: 10px;
height: 17px;
}
.b {
height: 40px;
margin-top: 23px; /* ADDED */
}
.c {
margin-bottom: 10px;
height: 18px;
margin-top: auto; /* ADDED */
}
/* STYLING */
.a,.b,.c {
border: 1px solid blue;
background: cadetblue;
}
.a:before,.b:before,.c:before {
content: '';
top: 0;
width: 2px;
position: absolute;
left: 100px;
background: red;
}
.a:before {
height: 10px;
}
.b:before {
height: 50px;
left: 200px;
}
.c:before {
left: 100px;
top: unset;
bottom: 0;
height: 10px;
}
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
I have a small div with fixed width and height, inside i have text, that could be probably wrapped and icon
All i need is to keep icon as close as possible to text, but if text is wrapped it will have extra space inside it
Example at JsFiddle
HTML
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
Css
wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
width: 100px;
}
.title {
border: 1px solid green;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
You can use CSS Grid system:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 0em;
height: 50px;
width: 100px;
}
SOLUTION 1:
Well. To answer your question, you can straight ahead apply width to the .title.
.wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
width: 100px;
}
.title {
border: 1px solid green;
width: 58px;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
SOLUTION 2:
But I would suggest that you use float instead of flex model with the below solution
.wrapper {
height: 50px;
font-size: 0px;
}
.title {
border: 1px solid green;
height: 50px;
line-height: 50px;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
.title, .icon {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
<style type="text/css">
.wrapper
{
}
.title {
border: 1px solid green;
display: inline-block;
max-width: 60px;
vertical-align: middle;
}
.icon
{
border: 1px solid red;
width: 8px;
height: 8px;
display: inline-block;
}
</style>