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>
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 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.
I have a problem using the translate css function.
I have HTML as below.
<div class="outer-div">
<img src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png"/>
<div class="inner-div">
Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum
</div>
</div>
You will notice that I have an outer div which has an image and an inner div with contents. I am pushing the inner div in negative y-axis by 40px using the translate CSS property. I am doing it using the sample css below:
.outer-div {
background-color: blue;
width: 400px;
height: auto;
}
img {
width: 100%;
height: auto;
}
.inner-div {
background-color: red;
width: auto;
height: 200px;
transform: translate(0, -40px);
}
However, by doing so, I now have a gap of 40px at the bottom of the div. I want to keep only 20px gap as shown in attached image.
How can I only have 20px at the bottom? I have also created a sample code-pen ( http://codepen.io/hellouniverse/pen/XNyzZX ) to show the issue
try this css:
.outer-div {
background-color: blue;
max-width: 400px;
height: 445px;
}
img {
width: 100%;
height: auto;
}
.inner-div {
background-color: red;
width: auto;
height: 200px;
transform: translate(0, -40px);
}
use this transform property to make 20px to 40px:
transform: scaleY(2);
the scaleY specifies the height and the (2) multiplies the given height "20px" to 40px.
I have a difference of box sizing interpretation between webkit and Firefox using height 100% on a parent.
HTML:
<header>
Lorem ipsum dolor amet
</header>
<div class="wrapper">
<div class="content">
My background depends on my ancestor sibling
</div>
</div>
<div class="red">
<p class="white">
Amet ipsum dolor
</p>
</div>
CSS:
header {
height: 150px;
background: #fff;
}
.red {
background: red;
padding: 6em 0;
}
.content {
background: rgba(28,28,28, .3);
margin-bottom: -100%;
}
.wrapper {
position: relative;
height: 100%;
}
p.white {
background: #fff;
width: 70%;
margin: 0 auto;
}
JS fiddle here https://jsfiddle.net/m1fobvwv/
Result on Chrome (expected):
Wrong result on FF:
A colleague of mine found a workaround:
Add position: absolute; width: 100%; to .content
Updated fiddle https://jsfiddle.net/m1fobvwv/3/
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;
}