I'm trying to vertically position two divs (1&2), set to 'display: inline-block'. Can't understand why vertical-align doesn't want to work?
Ps. Don't want to use flexbox...
<div>
<div id="div1">
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</span>
</div>
<div id="div2">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</div>
</div>
.parent {
border: 1px solid red;
height: 150px;
width: 100%;
display: table;
}
.parent > * {
display: table-cell;
text-align: center;
vertical-align:middle;
}
#div1,
#div2 {
display: inline-block;
border: 1px solid blue;
}
<div class="parent">
<div>
<div id="div1">
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</span>
</div>
<div id="div2">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</div>
</div>
</div>
Add one more parent div and give display:table and for the immediate child set display:table-cell then give vertical-align:middle;. Please see the code.
It wasn`t working as the height of DIV hasnt been set! After setting height of DIV, vertical alignment of other one started working.
Related
I'm trying to style a reusable component such that it will stay inline but truncate its contents whenever it overflows. What makes it trickier is that I need to have an icon on the right.
The main issue is that I need the icon to stay on the same line, so I compensate for it in the width of the truncated text (width: calc(100% - 40px)), which makes any non-truncating example be that much shorter than it's normal width.
See the snippet below and how the short example is barely visible.
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: 100%;
margin-right: 16px;
background: #f1f1f1;
}
.value-and-icon-wrapper {
display: inline-block;
width: 100%;
}
.icon {
padding-left: 5px;
}
.truncated-text {
display: inline-block;
width: calc(100% - 40px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
-webkit-line-clamp: 1;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
This is because you are using a lot of inline-block and the width of inline-block is defined by its content so if you set 100% - 40px for a child item, it means its width minus 40px
Try to do it differently like below using flexbox:
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-flex;
max-width: calc(100% - 16px); /* don't forget to account for margin here */
margin-right: 16px;
background: #f1f1f1;
}
.icon {
padding-left: 5px;
}
.truncated-text {
flex:1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Without flexbox you can do it like below:
body, .container {
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: calc(100% - 16px); /* don't forget to account for margin/padding here */
margin-right: 16px;
background: #f1f1f1;
padding-right:20px;
box-sizing:border-box;
position:relative;
}
.icon {
padding-left: 5px;
position:absolute;
right:0;
top:0;
bottom:0;
}
.truncated-text {
display:block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Try applying the style text-overflow: ellipsis to the div that contains the text to be truncated.
MDN Documentation for text-overflow
I am wondering if it is possible to left align text below center aligned text, so that both texts start from same position.
In the example figure. The TITLEs are center aligned and the copy below is left aligned.
How can you realise something like this with CSS?
Here is a JSFiddle to start from
https://jsfiddle.net/j5p7v8m9/
<div>
<p style="text-align: center;">TITLE</p>
<p style="text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
Here is the answer. I've updated your JSFiddle. You need to add some wrappers for each divs, then you can centerize the title as follows:
HTML:
<div class="container">
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
CSS:
.container{
display: block;
}
.col{
float: left;
width: 33.33%;
}
.contents{
margin-left: 20px;
margin-right: 20px;
}
.title{
text-align: center;
}
JSFiddle: https://jsfiddle.net/53oLpvqg/
Please try with bootstrap css it my help you for easy css.
<div class="col">
<p class="text-center">Title</p>
<p class="text-left">Test content Content</p>
</div>
Check Fiddle https://jsfiddle.net/0h2nmj3r/
*Look at other answers for directions on align text this is answer will help with getting that column effect
The best way to get three columns like that is to use a type of special display in css called "flex". Flex allows you to easily align elements within the parent html element.
.container{
display:flex;
flex-direction : row;
justify-content: space-around;
}
.text-box{
display: flex;
flex-direction:column;
align-items:flex-start;
width:20%;
}
p{
margin: 0 0 5px 0;
}
<div class="container">
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
So as you can see I have applied flex to both the container and the text-box's. Left align can be used like in these other answers but i opted for align-items:flex-start so any element within the text-box will be aligned to the left.
By setting justify-content:space-around it makes each element within the container have equal space around it so if you were to change the window size the spaces would be relative and change. I would recommend studying more about flex and grid to improve your css skills.
I'm trying make "the end" in the following code to appear inline with the lorem ipsum, and can't figure out how. Is it possible? I can't change the HTML structure at all. (nor can I add js, etc)
#parent {
width: 300px;
border: 1px solid red;
}
#block2 a {
color: #00f;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
I want it to look like this:
If you are able to make changes to the CSS, then this is an easy solution. Just use display: inline, which will make the element only take as much space as necessary (acting like a <span> element).
However, if by chance, you are unable to, then there is no way I can think of for you to achieve this given your situation.
#parent {
width: 300px;
border: 1px solid red;
}
#block1, #block2 {
display: inline;
}
#block2 a {
color: #00f;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
You need to set the two block containers to display: inline:
#parent {
width: 300px;
border: 1px solid red;
}
#block2 a {
color: #00f;
}
#block1, #block2 {
display: inline;
}
<div id="parent">
<div id="block1">
<a> Lorem ipsum dolor sit amet, consectetur elit. dolor nulla. Duis lob.</a>
</div>
<div id="block2">
<a>The end</a>
</div>
</div>
I don't know if the title is good enough, but I'll explain it here more thoroughly. So I've got the following HTML code:
<section>
<aside>
<div class = "container">
<div class = "col-md-4 lefterino">
<p><span>Daily Posts</span>Lorem ipsum dolor sit amet consecteteur adipiscing elit lorem ipsum dolor sit amet consecteteur adipiscing elit lorem ipsum dolor sit amet consecteteur adipiscing elit</p>
<p><span>Daily Posts</span>Lorem ipsum dolor sit amet consecteteur adipiscing elit lorem ipsum dolor sit amet consecteteur adipiscing elit lorem ipsum dolor sit amet consecteteur adipiscing elit</p>
</div>
<div class = "col-md-3 midderino">
<p>asd</p>
</div>
<div class = "col-md-4 righterino">
<p>asd</p>
</div>
</div>
</aside>
</section>
And the following CSS code:
section {
height: 100%; // screen height
}
aside {
bottom: 0em;
position: absolute;
width: 100%;
}
.lefterino {
text-align: right;
color: #fff;
font-weight: 300;
}
.lefterino p {
width: 75%;
float: right;
opacity: 0.92;
margin-bottom: 4em;
}
The problem is that I want to align all the elements from the container div's at the bottom of the section. For the first div (lefterino) it works fine. For the second and third one, the elements (in my case the <p>) always gets aligned with the elements from the first div.
Here's an image that shows the effect:
I have the following markup:
<div id="container">
<div id="sidebar">
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div id="main">
<h2>Main</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
And following styles:
#sidebar {
background: #e3e3e3;
float: left;
}
#main {
background: #666;
}
I was expecting div with id sidebar to go on top and hide div with id main. My logic is - div with id sidebar is floated and is removed from normal flow thus div with id main should take its position. But all browsers display div with id main right below div with id sidebar as if there was no float.
You need to clear float after #sidebar.
HTML:
<div id="sidebar">
....
</div>
<div class="clr"></div>
<div id="main">
....
</div>
CSS:
.clr{clear:both;}
DEMO here.