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>
Related
I currently have two problems with a list of links.
First of all I need to display
| button | | text | | button |
side by side in the li. First button left hand side, then the text and the 2nd button on the right hand side of the li. Both buttons need to have the same height as the text in the middle has.
BUT they must not be as high as the whole li is, because the li can contain more elements, like a submenu, and then it would become much to high.
Any ideas (aside from a table per li)?
Thanks a lot for any help. It does look so simple (and I guess it is) but I am really getting frustrated meanwhile cause I didn't get it done...
button {
border: solid 1px #ccc;
}
a {
display: inline-block;
margin-right: 0;
background-color: #ffffff;
margin-left: 0;
}
.btn-left {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 100%;
border-right: solid 1px #333;
}
.btn-right {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
border-left: solid 1px #333;
}
ul {
border: solid 1px #333;
list-style-type: none;
padding: 0;
}
li {
background-color: #ccc;
position: relative;
}
li a {
display: inline-block;
}
.clearfix {
clear: both;
}
<ul>
<li>
<button class="btn-left">Btn 1</button>
<a href="#">
Lorem ipsum dolur sit Link Lorem ipsum dolur sit Lorem ipsum dolur sit Link Lorem ipsum dolur sit Lorem ipsum dolur sit Link Lorem ipsum dolur sit
</a>
<button class="btn-right">Btn 2</button>
<!-- here can be other content, e.g. a submenu:
<ul class="sub-menu">
<li>Lorem ipsum</li>
<li>dolor sit</li>
</ul>
-->
</li>
</ul>
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 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 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;
}