I have free box and content in it, but I need to do same height for row in it. Now is same height only box, but I need to do same height for row in box. In example which is bellow I have blue row, which is row where I need to do same height for it and keep them on the same line with the same height.
.container {
display:flex;
}
.box {
background:red;
}
.row {
background:blue;
}
<div class="container">
<div class="box">
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore explicabo quam aut cum pariatur blanditiis possimus</p></div>
<div class="row"><p>Lorem ipsum dolor sit amet</p></div>
</div>
<div class="box">
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore explicabo quam aut cum pariatur blanditiis possimus</p></div>
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque dolorem ut fuga impedit, obcaecati aut est inventore voluptatibus eligendi iusto dignissimos consequatur pariatur tenetur vero. Eum aspernatur ad porro a.</p></div>
</div>
<div class="box">
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt inventore, facilis error, tempore nisi optio quasi</div>
<div class="row"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p></div>
</div>
</div>
Have a read of this http://www.lottejackson.com/learning/an-equal-height-grid-using-flexbox
You need to make the rows display:flex
Related
Let's say I have 3 divs...
HTML:
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
</section>
CSS:
.section {
display: flex;
flex-wrap: wrap;
}
So what I want is to make these items wrap on only one column when I reduce my screen size...
The current behavior is like this on medium screen size
I want the behavior to be like this in all other screen sizes
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis
quaerat molestiae sed quis labore.
</p>
</div>
</section>
CSS - I have used flexbox
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.features {
display: flex;
flex-wrap: wrap;
}
.features .item {
/*flex: 0 0 100%;*/ /*remove if you don't want media query*/
max-width: 384px;/*add if you don't want media query*/
width: 100%;/*add if you don't want media query*/
padding: 0 1rem;
margin-bottom: 1rem;
}
/*remove if you don't want media query*/
/*#media (min-width: 768px) {
.features .item {
flex: 0 0 33.33%;
}
}*/
You can call that on media query Are you trying to do something like this??Let me know
section.features {
display: flex;
justify-content:space-around;
padding:10px;
}
#media only screen and (max-width:768px){
section.features {display: grid;}
}
RESIZE ME
<section class="features">
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
<div class="item">
<h3 class="item-name">Item1</h3>
<p class="item-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur sequi fuga labore. Distinctio eaque, officiis quaerat molestiae sed quis labore.</p>
</div>
</section>
I don't understand why 2nd div is not up of 1st div. I want they 2 div perfectly set as like my image direction. already i try display block but not working. i don't know why main problem. already i have many research, but all fail. so please help me to solution my problem. advanced thanks and love from my top heart.
`
.testimonial .content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.testimonial .content .testimonialBx{
max-width: calc(50% - 40px);
padding: 60px 40px;
margin: 20px;
background: #2196f3;
}
<section class="testimonial">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure!</p>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
</section>
`
Wrap those 2 divs in 1 div and make it as flex.
Updated Code
.testimonial .content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.testimonial .content .testimonialBx {
max-width: calc(50% - 40px);
padding: 60px 40px;
margin: 20px;
background: #2196f3;
}
.container {
display: flex;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<section class="testimonial">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure!</p>
</div>
<div class="container">
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
</div>
</section>
</body>
</html>
Answer from #nagendraNag is ideal. I would just remove the max-width
max-width: calc(50% - 40px);
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
The 4 divs have a width of 23% and are displayed inline-block, they have a height of 220px and margin 0. The issue is that they are not horizontally aligned
I tried to change the height and width already and removed the margin but that does not fix it.
It looks like this...
.aside-column {
width: 23%;
display: inline-block;
height: 220px;
margin: 0;
}
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
Give vertical-align:top; to .aside-column class.
.aside-column {
width: 23%;
display: inline-block;
height: 220px;
margin: 0;
vertical-align:top;
}
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
You can also use a parent container which is a flexbox.
.container {
display: flex;
}
.aside-column {
width: 23%;
height: 220px;
margin: 1%;
}
<div class="container">
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
</div>
This is the html file:
div {
height: 500px;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
padding: inherit;
margin: inherit;
}
.green {
background-color: forestgreen;
display: flex;
align-items: center;
justify-content: center;
}
.orange {
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
}
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
I want to set the all text centered of individual div height. Means first the text of h1 will appear and just below of it the text of paragraph tag will appear. the space from upper portion to h1 tag and the space from ending of p tag to lower portion have to same.
I am newbie.please help me.
This should work for you. Hope it helps!
div {
height: 500px;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
padding: inherit;
margin: inherit;
}
.green {
background-color: forestgreen;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
.orange {
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
div {
height: 500px;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
padding: inherit;
margin: inherit;
position: relative;
top: -60px;
left: 250px;
}
p {
padding: inherit;
margin: inherit;
position: relative;
top: 60px;
right: 480px;
}
.green {
background-color: forestgreen;
display: flex;
align-items: center;
justify-content: center;
}
.orange {
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
}
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
<div class="orange">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error deserunt, labore explicabo, beatae vitae atque? Explicabo suscipit quod molestiae.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi reprehenderit, praesentium commodi illo hic ex nisi cumque aperiam placeat accusamus.</p>
</div>
I'm creating my first website, using Twitter Bootstrap 3.
I want to create a feedback section using thumbnails.
What I need is to vertical-align social buttons in the bottom of each thumbnail no matter of thumbnail's height.
Here is my HTML code:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail vertical-container">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ut earum libero quaerat modi facilis suscipit qui at, minus tempore, fugiat ipsam, consequatur veniam iste itaque tempora dignissimos consectetur quas.</p>
<div class="vertical-container1">
<p>VK Instagram</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
<p>VK Instagram</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
<p>VK Instagram</p>
</div>
</div>
</div>
</div>!
How it looks now:
You can do this by positioning divs. Assign position relative to the container div. in your case col-md-4 but as it's a bootstrap class you have to give it other class name and assign position relative to it.
And position of the div containing buttons. (in your case vertical-container1) to position absolute
parentWrapperDiv{position:relative;}
buttonsContainer{position:absolute;bottom:0;}
You could set a minimum height for your text area using a custom class;
<p class="min-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...</p>
.min-height {
min-height:100px;
}
this will ensure all the text area's are the same height even if there is not enough text to push the buttons down.
An Exmaple
of course this could go the other way and end up having too much text in which case you'll want to add a maximum height thus;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...
.max-height {
max-height:120px;
overflow:hidden; // this will cut the text off
}
you try code before:
.thumbnail {position:relative;}
.thumbnail a.btn {position:absolute;bottom:0;left:0;}