<div>
<button>Lorem ipsum</button> <span>20</span>
<button>consectetur adipiscing elit</button> <span>30</span>
<button>ABC</button> <span>40</span>
<button>Something!</button> <span>50</span>
</div>
I want output screen to look like below:
Lorem ipsum 20
consectetur adipiscing elit. 30
ABC 40
Something! 50
Use CSS grid
div {
display: inline-grid;
grid-template-columns: auto auto;
gap: 0 10px;
justify-items:start;
}
<div>
<button>Lorem ipsum</button> <span>20</span>
<button>consectetur adipiscing elit</button> <span>30</span>
<button>ABC</button> <span>40</span>
<button>Something!</button> <span>50</span>
</div>
Related
So I am trying to create a website and currently have a side section and the main body to the right of that. What is the best way to make the right main body of text move down below the side section so when viewing on smaller devices (mobile tablet etc).
so essentially keep div 2 where it is and move divs 6 + 8 + 9 + 10 down below 2
Here is what I have so far:
<div class="1">
<div class="2">
<div class="3">
<img src="" />
</div>
<div class="4">
<h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h1>
</div>
<div class="5">
<h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h1>
</div>
</div>
<div class="6">
<h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h1>
</div>
<div class="8">
<h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h1>
</div>
<div class="9"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
<div class="10"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</div>
</div>
And here is my css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #BBBDC0;
}
.1 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
margin: 10%;
}
.2{
grid-area: 1 / 1 / 7 / 2;
}
.6{
grid-area: 1 / 2 / 3 / 6;
}
.8{
grid-area: 3 / 2 / 5 / 6;
}
.9{
grid-area: 5 / 2 / 7 / 6;
}
.10{
grid-area: 7 / 2 / 8 / 5;
}
.2,
.6,
.8,
.9,
.10{
border: 1px solid black;
text-align: center;
}
I'm unsure which is the best way to do about this, would it be media queries? if so what is the best way to do? if not what are some other possibilities one could consider? (I renamed my divs to numbers as i wanted to keep them private for the time being)
Thanks to any contribution in advance anything is a help :)
Using flex, you can order your elements however you wish. Combine this with media responsive CSS selector such as #media only screen and (max-width: XXXpx){}
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
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.
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 have a CSS grid layout, and I would like to have one of the grid-items span two rows.
Normally I would do this via with the grid-row: span 2 property, or by using named grid areas.
In the example though, despite there being room for .news-item-5 to also span the row below (and effectively take over the space allocated to .news-item-7), I can't get this to work.
Is it not possible in this grid layout to have .news-item-5 span two rows?
As well as the included snippets I have a codepen: https://codepen.io/emilychews/pen/GzpBmO
Any help would be amazing.
/* ---- GRID */
.second-grid-wrapper {
display: grid;
grid-gap: 1rem;
grid-template-columns: 2fr 2fr 1fr;
grid-template-areas:
"news-1 news-2 news-3"
"news-1 news-4 news-5"
"news-6 news-4 news-5";
}
.news-item-1 {grid-area: news-1}
.news-item-4 {grid-area: news-4}
/* .news-item-5 {grid-area: news-5} */
.news-item-7 {
background: #fff;
}
.news{
background: lightblue;
box-sizing: border-box
}
<section class="second-grid-wrapper">
<article class="news news-item-1">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 1</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-2">
<div class="top-news-item-text-wrapper">
<h3 class="news-item-heading td">A SMALLER HEADLINE - 2</h3>
<a target="_blank" class="bottom-text td">Link</a>
</div>
</article>
<article class="news news-item-3">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline -3</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-4">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 4</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-5">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 5</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-6">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">SOMETHING ELSE - 6</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-7">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 7</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
</section>
Solution
Add grid-auto-rows: 1fr to your grid container.
/* ---- GRID */
.second-grid-wrapper {
display: grid;
grid-auto-rows: 1fr; /* new */
grid-template-columns: 2fr 2fr 1fr;
grid-gap: 1rem;
grid-template-areas:
"news-1 news-2 news-3"
"news-1 news-4 news-5"
"news-6 news-4 news-5";
}
.news-item-1 {grid-area: news-1}
.news-item-4 {grid-area: news-4}
.news-item-5 {grid-area: news-5}
.news-item-7 {background: #fff;}
.news{
background: lightblue;
box-sizing: border-box
}
<section class="second-grid-wrapper">
<article class="news news-item-1">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 1</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-2">
<div class="top-news-item-text-wrapper">
<h3 class="news-item-heading td">A SMALLER HEADLINE - 2</h3>
<a target="_blank" class="bottom-text td">Link</a>
</div>
</article>
<article class="news news-item-3">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline -3</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-4">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 4</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-5">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 5</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-6">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">SOMETHING ELSE - 6</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-7">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 7</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
</section>
Explanation
The element (.news-item-5) is actually expanding two rows in your code. Here's the view using Firefox's Grid outline tool:
You can see that the News Item 5 grid item is expanding across two rows. However, its content is confined to the first row.
This is most likely due to an absence of defined row lengths. As a result, grid-template-rows remains at its default setting: none, which means all rows will be implicitly created and sized by grid-auto-rows, who's default value is auto.
From the spec:
ยง 7.2. Explicit Track Sizing: the grid-template-rows and
grid-template-columns properties
The none value.
Indicates that no explicit grid tracks are created by this property (though explicit grid tracks could still be created by grid-template-areas).
Note: In the absence of an explicit grid any rows/columns will be implicitly generated, and their size will be determined by the grid-auto-rows and grid-auto-columns properties.
Therefore, as a solution, give the grid some solid guidance by switching from grid-auto-rows: auto to grid-auto-rows: 1fr.
Based on your CSS code, your grid-template-areas indicate that you need to adjust the grid-template-columns: to read 2fr 2fr 2fr;. You have your style for .news-item-5 commented out, so make that visible and comment out the style for .news-item-7.
Then move down to your HTML and either remove (or comment out) the <article class="news news-item-7"> section that you want .news-item-5 to extend into.
I'm trying to align a movie poster image, description text & add to cart button on the same line. The text needs to be centered aligned and not wrap around button or image. It should look like this.
However, with my current code, it looks like this. Movie description text is not center-aligned and it wraps around the button.
This is my code. How can I modify it to fix it to look like the first image?
<div class="card-block">
<div class="pull-left"><img src="https://{{movie.image}}" alt="[Image Missing]" width="70px" /></div>
<br><span>{{movie.description}}</span>
<span>
<button class="float-right btn btn-sm btn-success" (click)="addToCart(movie)">
Add to Cart
</button></span>
</div>
There are many ways to solve your problem.
You can use flex
.container {
display: flex;
align-items: center;
}
.container .item:nth-child(2){ /*Only second item padding and center text*/
padding-left: 1em;
padding-right: 1em;
text-align: center;
}
<div class="container">
<div class="item">
<img src="https://via.placeholder.com/80x100">
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis sagittis enim. Nulla viverra aliquam.</p>
</div>
<div class="item">
<button> Add to cart </button>
</div>
</div>
Or you can try with the new CSS-Grid, but it's not supported at all on some browsers yet
.container {
display: grid;
grid-template-columns: 1fr 4fr 1fr; /*Here you set how many columns will be and how much of the space they will take, for example there are 3 values, meaning 3 columns, the first and the last one will take 1 space of the row, and the second one will take 4 spaces*/
align-items: center;
grid-gap: 1em; /*The gap between items*/
}
.container .item:nth-child(2) {
text-align: center;
}
<div class="container">
<div class="item">
<img src="https://via.placeholder.com/80x100">
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sagittis sagittis enim. Nulla viverra aliquam.</p>
</div>
<div class="item">
<button> Add to cart </button>
</div>
</div>
Try to use flex instead, this is example:
.wrapper {
display: flex;
flex-direction: row;
align-items: center
}
p {
text-align:center
}
<div class="wrapper">
<img src="https://via.placeholder.com/150" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet est vel erat rutrum tempus. Etiam auctor dapibus magna, ut auctor metus pretium sed.
</p>
<button>
Add
</button>
</div>
Hope this help.