I want to align my button at the bottom right corner of my div. How can I do that?
Current css of div:
float: right;
width: 83%;
margin-right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height:625px;
overflow:auto;
You can use position:absolute; to absolutely position an element within a parent div.
When using position:absolute; the element will be positioned absolutely from the first positioned parent div, if it can't find one it will position absolutely from the window so you will need to make sure the content div is positioned.
To make the content div positioned, all position values that aren't static will work, but relative is the easiest since it doesn't change the divs positioning by itself.
So add position:relative; to the content div, remove the float from the button and add the following css to the button:
position: absolute;
right: 0;
bottom: 0;
CSS3 flexbox can also be used to align button at the bottom of parent element.
Required HTML:
<div class="container">
<div class="btn-holder">
<button type="button">Click</button>
</div>
</div>
Necessary CSS:
.container {
justify-content: space-between;
flex-direction: column;
height: 100vh;
display: flex;
}
.container .btn-holder {
justify-content: flex-end;
display: flex;
}
Screenshot:
Useful Resources:
Specs
MDN
CSS Tricks
* {box-sizing: border-box;}
body {
background: linear-gradient(orange, yellow);
font: 14px/18px Arial, sans-serif;
margin: 0;
}
.container {
justify-content: space-between;
flex-direction: column;
height: 100vh;
display: flex;
padding: 10px;
}
.container .btn-holder {
justify-content: flex-end;
display: flex;
}
.container .btn-holder button {
padding: 10px 25px;
background: blue;
font-size: 16px;
border: none;
color: #fff;
}
<div class="container">
<p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
<div class="btn-holder">
<button type="button">Click</button>
</div>
</div>
Parent container has to have this:
position: relative;
Button itself has to have this:
position: relative;
bottom: 20px;
right: 20px;
or whatever you like
I have solved this using position fixed:
.button-corner {
position: fixed;
bottom: 20px;
right: 20px;
}
Goes to the right and can be used the same way for the left
.yourComponent
{
float: right;
bottom: 0;
}
Related
Is it possible to wrap button text next to a span? So that the button appears over multiple lines.
E.g:
div {
background-color: #ccc;
padding: 10px;
width: 150px;
}
button {
border: 0;
background: transparent;
}
<div>
<span>Lorem ipsum dolor sit amet </span><button>Button with a long label</button>
</div>
In the case above the button text should continue as though it were part of the text, similar to a link.
display:contents; can do this but you may lose more than what you will win (it can break the accessibility as well)
div {
background-color: #ccc;
padding: 10px;
width: 150px;
}
button {
border: 0;
background: transparent;
display:contents;
}
<div>
<span>Lorem ipsum dolor sit amet </span><button><span>Button with a long label</span></button>
</div>
Button is always rendered by the browser as inline-block. So what you want is not possible without changing the button tag to something like an href.
Wrap div into container
.container {
display: flex;
justify-content: center;
width: auto;
align-items: center;
}
<div class="container">
<span>Lorem ipsum dolor sit amet </span><button>Button with a long label</button>
</div>
I have a div on which
max-width: fit-content;
width: auto;
is applied, Now when I am removing any of the properties I do not see any changes. So unable to figure what is the specific difference between the two properties. I tried reading around fit-content but couldn't understand.
If you're using display:block element, using max-width: fit-content will make a difference.
Works on Firefox with prefix. Caniuse
.a {
max-width: -moz-fit-content;
max-width: fit-content;
width: auto;
background: pink;
}
.b {
/* max-width: fit-content; */
width: auto;
background: yellow;
}
<div class="a">Lorem ipsum dolor </div>
<div class="b">Lorem ipsum dolor </div>
<!-- there is no difference if we are using inline or inline-block elements -->
<span class="a">Lorem ipsum dolor </span>
<span class="b">Lorem ipsum dolor </span>
Mockup:
The parent div's height is dynamic; it shrinks to fit the left-hand div (the one containing the text). I'd like the right-hand div (white background, with child img) to stretch vertically to fill the parent div. Unfortunately, height: 100% only works when the parent div's height is statically determined.
Here's what I've got right now:
.container {
background-color: lightgray
}
.blurb {
display: inline-block;
padding: 2em;
}
.decoration {
float: right;
background-color: white;
position: relative;
left: -10px;
height: 100% // XXX does not work
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
Answers to similar questions recommend using display: table-cell;, but then you have the issue of making the first (text) div stretch horizontally all the way, which is a different can of worms entirely.
Flexbox can do that.
.container {
background-color: lightgray;
display: flex;
border: 1px solid red;
width: 80%;
margin: 1em auto;
}
.blurb {
flex: 1;
padding: 2em;
}
.decoration {
display: flex;
align-items: center;
background-color: white;
margin-right: 1em;
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
<div class="container">
<div class="blurb">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae accusantium, magni commodi repellendus quidem facilis doloremque perspiciatis, ab odio omnis deleniti, obcaecati maiores dolores?
</div>
<div class="decoration">
✓
</div>
</div>
You can achieve it with position property. The parent container set to relative and child decoration set to absolute with top and bottom set to 0.
.container {
background-color: lightgray;
position: relative;
}
.blurb {
display: inline-block;
padding: 2em;
}
.decoration {
float: right;
background-color: white;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
/* Align the content to center */
display:flex;
justify-content:center;
align-items:center;
text-align: center;
}
<div class="container">
<div class="blurb">
Lorem ipsum...
</div>
<div class="decoration">
✓
</div>
</div>
I have a simple flex container with 2 items; an image and the other is a small piece of descriptive text.
I'd like the image to grow and be as responsive as possible, but I also want there to be a max-height in place to avoid it growing too much. This causes a gap when the max-height is reached and the screen expands even further in width.
Is there a way to only have the container item fill the image as it grows so there are no gaps, or perhaps align the image to the left or the right side of the screen (self-align didn't appear to work)? I'm not sure what the answer to this is.
.container {
background-color: #FFEEDD;
display: flex;
flex-direction: row-reverse;
}
.container>.image {
flex-grow: 1;
}
.image img {
display: block;
max-width: 100%;
max-height: 300px;
}
.container>.text {
flex-grow: 2;
}
<div class="container">
<div class="image">
<img src="https://www.placecage.com/c/1500/2000">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius.
</div>
</div>
Solution #1
Get rid of
.container > .image {
flex-grow: 1;
}
Solution #2
.image{
text-align:right;
}
Solution #3 (You were trying to achieve this one)
All you needed was to add flex, direction to column and then align items to right by flex-end
.image{
display:flex;
flex-direction:column;
align-items:flex-end;
flex:1;
}
.container {
background-color: #FFEEDD;
display: flex;
flex-direction: row-reverse;
}
.image img {
display: block;
max-width: 100%;
max-height: 300px;
}
.container>.text {
flex-grow: 2;
}
<div class="container">
<div class="image">
<img src="https://www.placecage.com/c/1500/2000">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius.
</div>
</div>
If you want to align the text and image to the sides use justify-content:
.container {
background-color: #FFEEDD;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.image img {
display: block;
max-width: 100%;
max-height: 300px;
}
codepen
I want the green element to be under the text box and also under image.
I tried to set the z-index for each element, but nothing has changed.
Can I reach this through the z-index property?
I can't change html. And I also want the pseudo-element to be a child of the text block for the adaptive height
.item {
display: flex;
align-items: flex-start;
width: 400px;
height: 250px;
}
.col1 {
margin-right: 20px;
}
.col2 {
position: relative;
z-index: 1;
width: 200px;
height: auto;
padding: 5px;
background-color: gray;
}
.col2::before {
content: "";
position: absolute;
bottom: -20px;
left: -60px;
width: 150px;
min-height: 100px;
height: 100%;
z-index: -1;
background-color: seagreen;
}
.image {
position: relative;
z-index: 2;
width: 200px;
height: 150px;
}
<div class="item">
<div class="col1">
<img class="image" src="http://satyr.io/200x150/1" />
</div>
<div class="col2">
<p class="title">Lorem ipsum dolor</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima esse ipsam error repudiandae ut amet.</p>
</div>
</div>
Remove z-index: 1 from class .col2. So, the green block will appear under the image as well as the text box.
You could place an element inside <div class="col2"> because the pseudo element cannot have a lower z-index that the element itself. And then place an div inside of <div class="col2"> which you could apply the z-index and the gray background on.