I'd like to overlay two icons over another div and also align them to the right.
The relevant code at the moment can be summarized as
<div class="container">
<div class="icon">icon1</div>
<div class="icon">icon2</div>
</div>
.container {
position: relative
}
.icon {
position: absolute
right: 0px
}
As it stands, the icons align to the right over the div, but also overlap over one another. How would I fix this?
If I understand you correctly, this might be the result you're looking for ?
.container {
position: relative;
width: 180px;
height: 180px;
border: 1px dashed red;
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
<div class="container">
<div class="icon">icon1</div>
<div class="icon">icon2</div>
</div>
Related
so I'd like to put 2 texts around an image (one text on the left, the other right of the image) and center them vertically. Is there other ways than putting position:relative; in the container and position:absolute; to the text (and play with the pixels of top and left to put it in the position that I want) to make the text and image RESPONSIVE in any devices? I want something like this:
Here's my code:
HTML
<div class="socrates-words">
<p class="hello"><strong>Hello!</strong></p>
<p class="socrates-name"><strong>My name is Socrates.</strong></p>
</div>
<div class="container-gif">
<img src="/videos/socrates-video.gif" alt="" id="gif-socrates" />
</div>
CSS
.button-section .container-gif {
position: relative;
bottom: 80%;
}
.button-section .container-gif #gif-socrates {
transform: translate(-50%);
left: 50%;
width: 25%;
position: absolute;
display: none;
}
.button-section .socrates-words {
font-size: 32px;
position: relative;
}
.button-section .socrates-words .hello {
position: absolute;
left: 15%;
top: 17rem;
}
.button-section .socrates-words .socrates-name {
position: absolute;
left: 65%;
top: 17rem;
}
I'm doing my best and I'm a beginner so please no hate comments... Thank you in advance!
You do not have to change your HTML.
This snippet uses a CSS grid of 3 equal columns, tells it to use the contents of the first child rather than the child itself (i.e. the 2 p elements) using display: contents and defines the order of the second p element within the grid and the img containing element.
.container {
display: grid;
width: 100vw;
grid-template-columns: repeat(3, 1fr);
text-align: center;
}
.socrates-words {
display: contents;
}
.socrates-words>* {
display: flex;
align-items: center;
justify-content: center;
}
.socrates-words p:last-of-type {
order: 3;
}
.container-gif {
order: 2;
}
<div class="container">
<div class="socrates-words">
<p class="hello"><strong>Hello!</strong></p>
<p class="socrates-name"><strong>My name is Socrates.</strong></p>
</div>
<div class="container-gif">
<img src="https://picsum.photos/id/1015/50/100" alt="" id="gif-socrates" />
</div>
</div>
Obviously you can alter various dimensions to suit your particular requirement.
Here is an easy example of how you can do it.
just place your image in between the text container and then using display flex you can achieve the result you want.
It is also responsive.
Explanation
I used display: flex; so I can align all the image and text in a row.
I used justify-content: space-evenly; to make the space between the image and test even
I used align-items: center; to make all the text and the image to center from top and bottom.
.socrates-words{
display:flex;
justify-content: space-evenly;
align-items:center;
}
<div class="socrates-words">
<p class="hello"><strong>Hello!</strong></p>
<div class="container-gif">
<img src="https://images.unsplash.com/photo-1672002760123-4c6496489053?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=400&q=60" alt="" id="gif-socrates" />
</div>
<p class="socrates-name"><strong>My name is Socrates.</strong></p>
</div>
I hope you got the answer and also got how it works!
In the following html I want the txt-box div to be centered in the container, overlay the image, and expand to fill the container. It should have a margin of equal width on all sides allowing part of the image to show like a thick border.
The html shown is passable for what I want except the vertical vs. horizontal margins are always slightly different as the browser window is resized.
I feel like what I have here is a hack and that I am using flex-grow incorrectly. I understand flex-grow works to allow the txt-box div to expand since it is the only element with a grow value. If I can get that resolved I should be able to simply set a margin on txt-box and it should work.
What am I not understanding about flex-grow?
.container {
display: flex;
align-items: center;
justify-content: center;
border: solid 2px red;
position: relative;
}
.container img {
width: 100%;
flex-grow: 0;
flex-shrink: 0;
}
.txt-box {
background-color: white;
display: flex;
padding: 5px;
border: solid 2px blue;
flex-grow: 1;
position: absolute;
width: 90%;
height: 80%;
}
<div class="container">
<img src="blocks.png" />
<div class="txt-box">
hello world
</div>
</div>
Thanks to Michael Benjamin for putting me on the path to enlightenment. I finally got it figured out. My original question was actually a portion of what I was trying to accomplish. The answers are to use background-image:url('...') and make sure the table and row elements are display:flex.
JSFiddle
<html>
<head>
<style>
.flex-table {
flex-flow:column;
}
.flex-row {
flex-flow:row;
}
.container {
align-items: center;
justify-content: center;
padding: 20px;
border: solid 2px red;
background-image:url('https://i.imgur.com/BF3ty6o.jpg');
background-size:cover;
background-repeat:no-repeat;
max-width:500px;
}
.txt-box {
justify-self:stretch;
align-self:stretch;
border: solid 2px blue;
background-color: rgba(192,192,192,0.5);
}
body, .flex-table, .flex-row, .container, .txt-box {
display:flex;
flex-grow:1;
}
#media (max-width: 768px) {
.flex-row {
flex-flow:column;
}
}
</style>
</head>
<body>
<div class="flex-table">
<div class="flex-row">
<div class="container">
<div class="txt-box">
hello world 1
</div>
</div>
<div class="container">
<div class="txt-box">
hello world 2
</div>
</div>
<div class="container">
<div class="txt-box">
hello world 3
</div>
</div>
</div>
<div class="flex-row">
<div class="container">
<div class="txt-box">
hello world 4
</div>
</div>
<div class="container">
<div class="txt-box">
hello world 5
</div>
</div>
<div class="container">
<div class="txt-box">
hello world 6
</div>
</div>
</div>
</div>
</body>
</html>
What am I not understanding about flex-grow?
Flex properties don't work on absolutely positioned children of a flex container.
§ 4.1. Absolutely-Positioned Flex
Children
As it is out-of-flow, an absolutely-positioned child of a flex
container does not participate in flex layout.
Therefore, flex-grow: 1 on txt-box is not doing anything. It's just being ignored.
Considering that you want the image simply laying in the background, while the text box has more requirements, I would suggest absolutely positioning the image and leaving the text box in the normal flow.
Then give the text box full width and height, with equal padding on the primary container to keep uniform "margins" across screen sizes.
Here's a demo, with a few extra features to help illustrate the concepts involved.
body {
height: 100vh;
display: flex;
margin: 0;
padding: 10px;
}
.container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
border: solid 2px red;
}
img {
position: absolute;
height: 100%;
width: 100%;
object-fit: contain; /* also try 'cover' for demo */
}
.txt-box {
z-index: 1;
width: 100%;
height: 100%;
border: solid 2px blue;
background-color: rgba(192,192,192,0.5);
}
* {
box-sizing: border-box;
}
<div class="container">
<img src="http://i.imgur.com/60PVLis.png">
<div class="txt-box">hello world</div>
</div>
jsFiddle demo
I am looking at having a header to a horizontal scrollable section that would have a date counter along the top, spanning the length of a year. Each date is represented by a single div. Weekends have a background color that is different than the week days. I am not using any graphics library, just straight HTML, CSS and JS. It is preferable that I do not need to change this.
My goal is to make it so that the weekend background color will extend down the main body of the panel without disrupting the layout and elements present there. The end result would look something like this:
Things I thought could potentially work:
Extend the background color of the weekend cells so that they continue vertically down the height of the main panel. This requires that background colors of cells can extend beyond the bounds of an element
Have the panel show different background colors at certain intervals. This would require the ability to alternate the background color of the SAME div multiple times
I am definitely open to any other ideas if I am simply unware of a better way to do things.
Optimization is a key concern, as I am expecting to have a couple of hundred rows of data (in a vertically scrollable div) as well as 300+ columns (in a horizontally scrollable div). I have run a test to determine if it was still responsive enough with a div per cell. The answer was most definitely not: it took seconds to load, it was laggy with the scrolling and overall just not nice to use. Not particularly surprising at 60,000 elements.
I have tried doing the following:
Doing a transform and pseduo selector on the weekend elements to extend the background (have had trouble with the :after element also extending the size of the current element). I've also had a problem trying to get the :after selector to apply down rather than to the right, even after trying some basic transforms
Making the entire thing discrete and adding divs for every representable day of a row. This was awful and unfortunately unusable at the scale I am expecting, but technically has the desired appearance
Sample code that can used to get a similar situation to my current environment:
#mainPanel {
overflow-x: scroll;
display: flex;
height: 100vh;
flex-direction: column;
}
#header {
height: 25px;
box-sizing: border-box;
display: flex;
flex-direction: row;
width: 100%;
}
.headCell {
height: 100%;
border: 1px #cccccc solid;
border-left: none;
box-sizing: border-box;
min-width: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.weekend {
background-color: #efefef;
}
<div id="mainPanel">
<div id="header">
<div class="headCell">1</div>
<div class="headCell">2</div>
<div class="headCell">3</div>
<div class="headCell">4</div>
<div class="headCell">5</div>
<div class="headCell weekend">6</div>
<div class="headCell weekend">7</div>
<div class="headCell">8</div>
<div class="headCell">9</div>
<div class="headCell">10</div>
<div class="headCell">11</div>
<div class="headCell">12</div>
<div class="headCell weekend">13</div>
<div class="headCell weekend">14</div>
<div class="headCell">15</div>
<div class="headCell">16</div>
<div class="headCell">17</div>
<div class="headCell">18</div>
<div class="headCell">19</div>
<div class="headCell weekend">20</div>
</div>
<div id="panelBody">
Here is some text that will appear in the main div. I am hoping to see this not moved around and that the grey weekend lines will appear underneath the text.
</div>
</div>
Any help with concepts that could assist with this would be much appreciated, and any references to reading materials would be icing on the cake. Thanks a tonne in advance.
You can manipulate the .weekend::after pseudo element by adding this code:
.weekend::after{
content:'';
position:absolute;
height:100%;
width:25px;
top:1em;
z-index:-1;
background-color: #efefef;
}
Here is the full working code:
#mainPanel {
overflow-x: scroll;
display: flex;
height: 100vh;
flex-direction: column;
}
#header {
height: 25px;
box-sizing: border-box;
display: flex;
flex-direction: row;
width: 100%;
}
.headCell {
height: 100%;
border: 1px #cccccc solid;
border-left: none;
box-sizing: border-box;
min-width: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.weekend {
background-color: #efefef;
}
.weekend::after{
content:'';
position:absolute;
height:100%;
width:25px;
top:1em;
z-index:-1;
background-color: #efefef;
}
<div id="mainPanel">
<div id="header">
<div class="headCell">1</div>
<div class="headCell">2</div>
<div class="headCell">3</div>
<div class="headCell">4</div>
<div class="headCell">5</div>
<div class="headCell weekend">6</div>
<div class="headCell weekend">7</div>
<div class="headCell">8</div>
<div class="headCell">9</div>
<div class="headCell">10</div>
<div class="headCell">11</div>
<div class="headCell">12</div>
<div class="headCell weekend">13</div>
<div class="headCell weekend">14</div>
<div class="headCell">15</div>
<div class="headCell">16</div>
<div class="headCell">17</div>
<div class="headCell">18</div>
<div class="headCell">19</div>
<div class="headCell weekend">20</div>
</div>
<div id="panelBody">
Here is some text that will appear in the main div. I am hoping to see this not moved around and that the grey weekend lines will appear underneath the text.
</div>
</div>
You can add an :after and set a width of 0 with a margin-left equal to the width of the cell (16px in this case.
This can be seen i the following:
#mainPanel {
overflow-x: scroll;
display: flex;
height: 100vh;
flex-direction: column;
}
#header {
height: 25px;
box-sizing: border-box;
display: flex;
flex-direction: row;
width: 100%;
}
.headCell {
height: 100%;
border: 1px #cccccc solid;
border-left: none;
box-sizing: border-box;
min-width: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.weekend {
background-color: #efefef;
}
.weekend:after {
background-color: #efefef;
width: 20px;
height: 100vh; /* Adjust to suit */;
content: "";
display: inline-block;
margin-left: -16px;
z-index: -1;
}
<div id="mainPanel">
<div id="header">
<div class="headCell">1</div>
<div class="headCell">2</div>
<div class="headCell">3</div>
<div class="headCell">4</div>
<div class="headCell">5</div>
<div class="headCell weekend">6</div>
<div class="headCell weekend">7</div>
<div class="headCell">8</div>
<div class="headCell">9</div>
<div class="headCell">10</div>
<div class="headCell">11</div>
<div class="headCell">12</div>
<div class="headCell weekend">13</div>
<div class="headCell weekend">14</div>
<div class="headCell">15</div>
<div class="headCell">16</div>
<div class="headCell">17</div>
<div class="headCell">18</div>
<div class="headCell">19</div>
<div class="headCell weekend">20</div>
</div>
<div id="panelBody">
Here is some text that will appear in the main div. I am hoping to see this not moved around and that the grey weekend lines will appear underneath the text.
</div>
</div>
I'm using flexbox to align my child elements. What I'd like to do is center one element and leave the other aligned to the very left. Normally I would just set the left element using margin-right: auto. The problem is that pushes the center element off center. Is this possible without using absolute positioning?
HTML & CSS
#parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: center;
margin: 0 auto;
width: 500px;
}
#left {
margin-right: auto;
}
#center {
margin: auto;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
Add third empty element:
<div class="parent">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right"></div>
</div>
And the following style:
.parent {
display: flex;
}
.left, .right {
flex: 1;
}
Only left and right are set to grow and thanks to the facts that...
there are only two growing elements (doesn't matter if empty) and
that both get same widths (they'll evenly distribute the available space)
...center element will always be perfectly centered.
This is much better than accepted answer in my opinion because you do not have to copy left content to right and hide it to get same width for both sides, it just magically happens (flexbox is magical).
In action:
.parent {
display: flex;
}
.left,
.right {
flex: 1;
}
/* Styles for demonstration */
.parent {
padding: 5px;
border: 2px solid #000;
}
.left,
.right {
padding: 3px;
border: 2px solid red;
}
.center {
margin: 0 3px;
padding: 3px;
border: 2px solid blue;
}
<div class="parent">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right"></div>
</div>
EDIT: See Solo's answer below, it is the better solution.
The idea behind flexbox is to provide a framework for easily aligning elements with variable dimensions within a container. As such, it makes little sense to provide a layout where the width of one element is totally ignored. In essence, that is exactly what absolute positioning is for, as it takes the element out of the normal flow.
As far as I know, there is no nice way of doing this without using position: absolute;, so I would suggest using it... but If you REALLY don't want to, or can't use absolute positioning then I suppose you could use one of the following workarounds.
If you know the exact width of the "Left" div, then you could change justify-content to flex-start (left) and then align the "Center" div like this:
#center {
position: relative;
margin: auto;
left: -{half width of left div}px;
}
If you do not know the width, then you could duplicate "Left" on the right side, use justify-content: space-between;, and hide the new right element:
Just to be clear, this is really, really ugly... better to use absolute positioning than to duplicate content. :-)
#parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 500px;
}
#right {
opacity: 0;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
<span id="right">Left</span>
</div>
.parent {
display: flex;
}
.left {
flex: 1;
}
.parent::after {
flex: 1;
content: '';
}
<div class="parent">
<div class="left">Left</div>
<div>Center</div>
</div>
I have another solution. In my opinion, Adding an empty block to the center element is fine but code-wise it bit ugly.
Since this is 4 years old I figured I'd update this with a much easier CSS Grid solution.
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid black;
margin: 0 auto;
width: 500px;
}
#center {
text-align: center;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
If you don't want to rely on positioning, the only way I've found that makes it truly centered is to use a combination of auto margin and negative margin prevent the centered element to getting pushed over by the left aligned element. This requires that you know the exact width of the left aligned element though.
.container {
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: center;
}
.block {
width: 120px;
background: tomato;
}
.justify-start {
margin-right: auto;
}
.justify-center {
margin-right: auto;
margin-left: -120px;
}
<div class="container">
<div class="block justify-start"></div>
<div class="block justify-center"></div>
</div>
As far as I know this is possible with the following code.
https://jsfiddle.net/u5gonp0a/
.box {
display: flex;
justify-content: center;
background-color: green;
text-align: left;
}
.left {
padding: 10px;
background-color: pink;
}
.center {
padding: 10px;
background-color: yellow;
margin: 0 auto;
}
<div class="box">
<div class="left">left</div>
<div class="center">center</div>
</div>
Try this no hacks :)
CSS
.container{
width: 500px;
margin: 0 auto;
}
.box{
display: flex;
align-items: center;/* just in case*/
justify-content: space-between;
}
.box p:nth-child(2){
text-align: center;
background-color: lime;
flex: 1 1 0px;
}
HTML
<div class="container">
<div class="box">
<p>One</p>
<p>Two</p>
</div>
</div>
http://codepen.io/whisher/pen/XpGaEZ
If you have a grid system you can use it to do what you want without "extra" css.
Below with bootstrap (V 4.X)
Note: It uses flex under the hood
<div class="row">
<div class="col text-left">left</col>
<div class="col text-center">center</col>
<div class="col text-right">right</col>
</div>
Doc bootstrap: https://getbootstrap.com/docs/4.6/layout/grid/
Et voilà ! :)
Solution 1: give 50% width to center element and use justify-content:space-between
#parent {
display: flex;
justify-content: space-between;
}
#center {
flex-basis: 50%;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
Solution 2: Add one dummy element and hide it.
#parent {
display: flex;
justify-content: space-between;
}
#right {
visibility:hidden;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
<span id="right">Right</span>
</div>
I'm using flexbox to align my child elements. What I'd like to do is center one element and leave the other aligned to the very left. Normally I would just set the left element using margin-right: auto. The problem is that pushes the center element off center. Is this possible without using absolute positioning?
HTML & CSS
#parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: center;
margin: 0 auto;
width: 500px;
}
#left {
margin-right: auto;
}
#center {
margin: auto;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
Add third empty element:
<div class="parent">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right"></div>
</div>
And the following style:
.parent {
display: flex;
}
.left, .right {
flex: 1;
}
Only left and right are set to grow and thanks to the facts that...
there are only two growing elements (doesn't matter if empty) and
that both get same widths (they'll evenly distribute the available space)
...center element will always be perfectly centered.
This is much better than accepted answer in my opinion because you do not have to copy left content to right and hide it to get same width for both sides, it just magically happens (flexbox is magical).
In action:
.parent {
display: flex;
}
.left,
.right {
flex: 1;
}
/* Styles for demonstration */
.parent {
padding: 5px;
border: 2px solid #000;
}
.left,
.right {
padding: 3px;
border: 2px solid red;
}
.center {
margin: 0 3px;
padding: 3px;
border: 2px solid blue;
}
<div class="parent">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right"></div>
</div>
EDIT: See Solo's answer below, it is the better solution.
The idea behind flexbox is to provide a framework for easily aligning elements with variable dimensions within a container. As such, it makes little sense to provide a layout where the width of one element is totally ignored. In essence, that is exactly what absolute positioning is for, as it takes the element out of the normal flow.
As far as I know, there is no nice way of doing this without using position: absolute;, so I would suggest using it... but If you REALLY don't want to, or can't use absolute positioning then I suppose you could use one of the following workarounds.
If you know the exact width of the "Left" div, then you could change justify-content to flex-start (left) and then align the "Center" div like this:
#center {
position: relative;
margin: auto;
left: -{half width of left div}px;
}
If you do not know the width, then you could duplicate "Left" on the right side, use justify-content: space-between;, and hide the new right element:
Just to be clear, this is really, really ugly... better to use absolute positioning than to duplicate content. :-)
#parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 500px;
}
#right {
opacity: 0;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
<span id="right">Left</span>
</div>
.parent {
display: flex;
}
.left {
flex: 1;
}
.parent::after {
flex: 1;
content: '';
}
<div class="parent">
<div class="left">Left</div>
<div>Center</div>
</div>
I have another solution. In my opinion, Adding an empty block to the center element is fine but code-wise it bit ugly.
Since this is 4 years old I figured I'd update this with a much easier CSS Grid solution.
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid black;
margin: 0 auto;
width: 500px;
}
#center {
text-align: center;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
If you don't want to rely on positioning, the only way I've found that makes it truly centered is to use a combination of auto margin and negative margin prevent the centered element to getting pushed over by the left aligned element. This requires that you know the exact width of the left aligned element though.
.container {
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: center;
}
.block {
width: 120px;
background: tomato;
}
.justify-start {
margin-right: auto;
}
.justify-center {
margin-right: auto;
margin-left: -120px;
}
<div class="container">
<div class="block justify-start"></div>
<div class="block justify-center"></div>
</div>
As far as I know this is possible with the following code.
https://jsfiddle.net/u5gonp0a/
.box {
display: flex;
justify-content: center;
background-color: green;
text-align: left;
}
.left {
padding: 10px;
background-color: pink;
}
.center {
padding: 10px;
background-color: yellow;
margin: 0 auto;
}
<div class="box">
<div class="left">left</div>
<div class="center">center</div>
</div>
Try this no hacks :)
CSS
.container{
width: 500px;
margin: 0 auto;
}
.box{
display: flex;
align-items: center;/* just in case*/
justify-content: space-between;
}
.box p:nth-child(2){
text-align: center;
background-color: lime;
flex: 1 1 0px;
}
HTML
<div class="container">
<div class="box">
<p>One</p>
<p>Two</p>
</div>
</div>
http://codepen.io/whisher/pen/XpGaEZ
If you have a grid system you can use it to do what you want without "extra" css.
Below with bootstrap (V 4.X)
Note: It uses flex under the hood
<div class="row">
<div class="col text-left">left</col>
<div class="col text-center">center</col>
<div class="col text-right">right</col>
</div>
Doc bootstrap: https://getbootstrap.com/docs/4.6/layout/grid/
Et voilà ! :)
Solution 1: give 50% width to center element and use justify-content:space-between
#parent {
display: flex;
justify-content: space-between;
}
#center {
flex-basis: 50%;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
Solution 2: Add one dummy element and hide it.
#parent {
display: flex;
justify-content: space-between;
}
#right {
visibility:hidden;
}
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
<span id="right">Right</span>
</div>