What I am trying to do is to get the red text just after the blue title of each boxes.
It seems I will have to add another div? I have added and modified the posotion of .card-indus img but the outcome is never what I want.
Do you know why it does not work even when I apply a position:relative; to .industries .container-industries .card-indus img? Do you have any suggestions?
.industries .container-industries .card-indus {
position: relative;
border: red solid 1px;
color: white;
max-height: 300px;
overflow: hidden;
height: 100%;
}
.industries .container-industries .card-indus img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
}
.industries .container-industries .card-indus .text-image {
position: absolute;
color: red;
left: 0;
top: 0;
}
.industries .container-industries .card-header {
height: 4rem;
display: flex;
align-items: center;
background: rgba(82, 134, 236, 0.6);
}
.industries .container-industries .card-header p {
margin-left: 1rem;
}
<div class="industries">
<div class="industries-icons">
<h2> Our Industries</h2>
<span class="border-1"></span>
<div class="container-industries">
<div class="card-indus">
<div class="card-header">
<p>Banking</p>
</div>
<div class="card-content">
<img src="../images/services/finance.jpg">
<p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Admin</p>
</div>
<div class="card-content">
<img src="../images/services/admin.jpg">
<p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Law</p>
</div>
<div class="card-content">
<img src="../images/services/law.jpg">
<p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Retail</p>
</div>
<div class="card-content">
<img src="../images/services/retail.jpg">
<p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Telecom</p>
</div>
<div class="card-content">
<img src="../images/services/telecom.jpg">
<p class="text-image">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.</p>
</div>
</div>
</div>
</div>
</div>
You would have to do two things:
1- move text-image div before the img div.
2- remove position: absolute; from img as you mentioned.
.industries .container-industries .card-indus {
position: relative;
border: red solid 1px;
color: white;
max-height: 300px;
overflow: hidden;
height: 100%;
}
.industries .container-industries .card-indus img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
}
.industries .container-industries .card-indus .text-image {
color: red;
left: 0;
top: 0;
}
.industries .container-industries .card-header {
height: 4rem;
display: flex;
align-items: center;
background: rgba(82, 134, 236, 0.6);
}
.industries .container-industries .card-header p {
margin-left: 1rem;
}
<div class="industries">
<div class="industries-icons">
<h2>Our Industries</h2>
<span class="border-1"></span>
<div class="container-industries">
<div class="card-indus">
<div class="card-header">
<p>Banking</p>
</div>
<div class="card-content">
<p class="text-image">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
voluptatibus numquam eveniet doloremque dignissimos veniam.
</p>
<img src="../images/services/finance.jpg" />
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Admin</p>
</div>
<div class="card-content">
<p class="text-image">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
voluptatibus numquam eveniet doloremque dignissimos veniam.
</p>
<img src="../images/services/admin.jpg" />
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Law</p>
</div>
<div class="card-content">
<p class="text-image">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
voluptatibus numquam eveniet doloremque dignissimos veniam.
</p>
<img src="../images/services/law.jpg" />
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Retail</p>
</div>
<div class="card-content">
<p class="text-image">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
voluptatibus numquam eveniet doloremque dignissimos veniam.
</p>
<img src="../images/services/retail.jpg" />
</div>
</div>
<div class="card-indus">
<div class="card-header">
<p>Telecom</p>
</div>
<div class="card-content">
<p class="text-image">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia
voluptatibus numquam eveniet doloremque dignissimos veniam.
</p>
<img src="../images/services/telecom.jpg" />
</div>
</div>
</div>
</div>
</div>
Related
<div class="row">
<div class="col-lg-3 " style="border: groove;">
<p class="circle col-xs-1 center-block">01</p>
<h3>trending courses</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-3" style="border: groove;">
<p class="circle text-center">02</p>
<h3>books&library</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit nostrum voluptates tempore, pariatur nobis
tempora repellendus deserunt suscipit, sed ex nihil eum impedit maiores quia modi qui aut velit
veritatis quam deleniti? Quasi dolor, asperiores ut cumque laboriosam accusamus eveniet esse. Officiis
quidem perferendis qui.</p>
</div>
<div class="col-lg-1">
</div>
<div class="col-lg-3" style="border: groove;">
<p class="circle">03</p>
<h3>certified teachers</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
</div>
</div>
Used bs-5,bootstrap.bundle.min.css
This is the below output for this code
3. This is the code of css
.circle {
border-radius: 50%;
width: 60px;
height: 60px;
padding: 10px;
background: purple;
border: 3px solid #000;
display: flex;
color: #fff;
text-align: center;
font: 28px arial, sans-serif;
}
I tried various ways of flex, it did not work until I change margin
Please help me, why this is not working
text: center on your .circle element can't work because it will only center text inside the element and not the element itself.
If what you want to center the circle then you have to set margin to auto for the element .
Or if you want to do it using flexbox then you have to wrap your p element with a div which has display: flex and justify-content: center styles.
Here's a flexbox-only solution:
.circle {
border-radius: 50%;
width: 60px;
height: 60px;
padding: 10px;
background: purple;
border: 3px solid #000;
display: flex;
color: #fff;
text-align: center;
font: 28px arial, sans-serif;
}
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-3 " style="border: groove;">
<!-- 👇 flexbox wrapper for circle -->
<div class="d-flex justify-content-center">
<p class="circle col-xs-1 center-block">01</p>
</div>
<h3 class="text-center">trending courses</h3>
<p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-3" style="border: groove;">
<!-- 👇 flexbox wrapper for circle -->
<div class="d-flex justify-content-center">
<p class="circle text-center">02</p>
</div>
<h3 class="text-center">books&library</h3>
<p class="text-center">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit nostrum voluptates tempore, pariatur nobis tempora repellendus deserunt suscipit, sed ex nihil eum impedit maiores quia modi qui aut velit veritatis quam deleniti? Quasi dolor, asperiores
ut cumque laboriosam accusamus eveniet esse. Officiis quidem perferendis qui.</p>
</div>
<div class="col-lg-1">
</div>
<div class="col-lg-3" style="border: groove;">
<!-- 👇 flexbox wrapper for circle -->
<div class="d-flex justify-content-center">
<p class="circle">03</p>
</div>
<h3 class="text-center">certified teachers</h3>
<p class="text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, consectetur?</p>
</div>
</div>
If you wrap each circle with a flexbox that has justify-content: center;, any items in the flexbox will be centered horizontally.
EDIT: OP wanted to center paragraph text as well.
Use it to center all elements:
<div class="col-lg-3 d-flex flex-column align-items-center justify-content-center"></div>
Try using margin:auto in css or m-auto in bootstrap
Using Css
.circle {
margin:auto
}
Using BootStrap add a class name to the div m-auto
<p class="circle text-center m-auto">02</p>
Using Flex
Add a class called dop to parent and chi to child circle
<div className="col-lg-3 dop" style={{ border: "groove" }}>
<p className="circle text-center chi">02</p>
CSS:
.dop {
display: flex;
flex-direction: column;
}
.chi {
align-self: center;
}
Try This
I made some cards and i want to center the button. The only thing is, whatever I do the button stays at the start. And when i display the button as a flex or a block, it expands to full width. Can someone help me out?
The H3 does perfectly align in the center. I can't figure out why the button stays at exactly the same spot.
.index-cards .container {
display: flex;
justify-content: center;
align-items: center;
}
.index-cards .card {
padding: 0;
margin: 10px;
border-radius: 10px;
}
.index-cards .card-image {
height: 240px;
background-size: cover;
border-radius: 10px;
}
.index-cards .card-1 {
background-image: url(https://via.placeholder.com/500&text=1);
}
.index-cards .card-2 {
background-image: url(https://via.placeholder.com/500&text=2);
}
.index-cards .card-3 {
background-image: url(https://via.placeholder.com/500&text=3);
}
.index-cards p {
margin: 0 15px;
}
.index-cards h3,
.index-cards a {
text-align: center;
}
<section class="index-cards my-150px">
<div class="container">
<div class="card">
<div class="card-image card-1"></div>
<h3 class="my-30px">Sportscholen</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
Sportschool zoeken
</div>
<div class="card">
<div class="card-image card-2"></div>
<h3 class="my-30px">Nieuw bij FP30</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
Eerste keer
</div>
<div class="card">
<div class="card-image card-3"></div>
<h3 class="my-30px">Contact</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
Contact opnemen
</div>
</div>
</section>
I created a new class text-center and wrapped the <a> inside this new div. The reason the heading was centering but not the anchor. Because on heading is CSS display: block; is applied by default and taking the full width.
.index-cards .container {
display: flex;
justify-content: center;
align-items: center;
}
.index-cards .card {
padding: 0;
margin: 10px;
border-radius: 10px;
}
.index-cards .card-image {
height: 240px;
background-size: cover;
border-radius: 10px;
}
.index-cards .card-1 {
background-image: url(https://via.placeholder.com/500&text=1);
}
.index-cards .card-2 {
background-image: url(https://via.placeholder.com/500&text=2);
}
.index-cards .card-3 {
background-image: url(https://via.placeholder.com/500&text=3);
}
.index-cards p {
margin: 0 15px;
}
.index-cards h3,
.index-cards a {
text-align: center;
}
.text-center{
text-align: center;
}
<section class="index-cards my-150px">
<div class="container">
<div class="card">
<div class="card-image card-1"></div>
<h3 class="my-30px">Sportscholen</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
<div class="text-center">Sportschool zoeken</div>
</div>
<div class="card">
<div class="card-image card-2"></div>
<h3 class="my-30px">Nieuw bij FP30</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
<div class="text-center">Eerste keer</div>
</div>
<div class="card">
<div class="card-image card-3"></div>
<h3 class="my-30px">Contact</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam, dignissimos! Autem fugit perspiciatis incidunt nulla expedita quaerat cupiditate neque iure!</p>
<div class="text-center">Contact opnemen</div>
</div>
</div>
</section>
Remove the .index-cards a add separately
.index-cards h3,
.index-cards a {
text-align: center;
}
Add This:
.index-cards a {
text-align: center;
display: block;
}
This question already has answers here:
What is a clearfix?
(10 answers)
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 2 years ago.
I have seen many answers but none seem to work for me...
My footer has come right next to the paragraphs. How can I get them to down of the page... Also how to make the whole page be seen at the same time without needing to scroll down?
Below is my code:
body {
margin: 0;
padding: 0;
background: #85dcb8;
}
header {
background: coral;
padding: 1px;
margin: 0px;
text-align: center;
border-bottom: black 4px solid;
float: center;
}
header h1 {
margin: 0px;
}
header p {
border-bottom: solid 5px black;
display: inline-block;
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
width: 70%;
margin-left: 20%;
}
.side-bar {
grid-gap: 2px;
padding-left: 10px;
float: left;
}
.links {
display: block;
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}
footer {
background-color: #000000;
color: #fff;
line-height: normal;
word-spacing: 2px;
text-align: center;
padding: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ab!
</p>
</header>
<aside>
<div class="side-bar">
<div class="links">Page 1</div>
<div class="links">Page 2</div>
<div class="links">Page 3</div>
<div class="links">Page 4 </div>
<div class="links">Page 5</div>
<div class="links">Page 6</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
</div>
</aside>
<section>
<div class="container">
<div>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
</div>
</section>
<footer>
This webpage officialy belongs to Anirudh. Copyrights since 2020 ©
</footer>
</body>
</html>
Adding a margin and giving it a particular value makes it hard in math...So I would prefer some easier method with simple CSS.
Image of how it looks for me.
Also any mistakes in my code that can be improved to make it more efficient?
Thanks.
EDIT: Adding an empty div helped me...Empty div with the class of clr and using clear:both; for the clr class in CSS works..
body {
margin: 0;
padding: 0;
background: #85dcb8;
}
header {
background: coral;
padding: 1px;
margin: 0px;
text-align: center;
border-bottom: black 4px solid;
float: center;
}
header h1 {
margin: 0px;
}
header p {
border-bottom: solid 5px black;
display: inline-block;
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
width: 70%;
margin-left: 20%;
}
.side-bar {
grid-gap: 2px;
padding-left: 10px;
float: left;
}
.links {
display: block;
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}
footer {
background-color: #000000;
color: #fff;
line-height: normal;
word-spacing: 2px;
text-align: center;
padding: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ab!
</p>
</header>
<aside>
<div class="side-bar">
<div class="links">Page 1</div>
<div class="links">Page 2</div>
<div class="links">Page 3</div>
<div class="links">Page 4 </div>
<div class="links">Page 5</div>
<div class="links">Page 6</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
</div>
</aside>
<section>
<div class="container">
<div>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
</div>
</section>
<footer>
This webpage officialy belongs to Anirudh. Copyrights since 2020 ©
</footer>
</body>
</html>
It's working...
body {
margin: 0;
padding: 0;
background: #85dcb8;
}
header {
background: coral;
padding: 1px;
margin: 0px;
text-align: center;
border-bottom: black 4px solid;
float: center;
}
header h1 {
margin: 0px;
}
header p {
border-bottom: solid 5px black;
display: inline-block;
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
width: 70%;
margin-left: 20%;
}
.side-bar {
grid-gap: 2px;
padding-left: 10px;
float: left;
}
.links {
display: block;
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}
footer {
background-color: #000000;
color: #fff;
line-height: normal;
word-spacing: 2px;
text-align: center;
padding: 50px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ab!
</p>
</header>
<aside>
<div class="side-bar">
<div class="links">Page 1</div>
<div class="links">Page 2</div>
<div class="links">Page 3</div>
<div class="links">Page 4 </div>
<div class="links">Page 5</div>
<div class="links">Page 6</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
</div>
</aside>
<section>
<div class="container">
<div>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
</div>
</section>
<footer>
This webpage officialy belongs to Anirudh. Copyrights since 2020 ©
</footer>
</body>
</html>
You can check now... it's working
section, aside {
min-height: calc(100vh - 100px);
/* here, replace 100px with the size of your header and footer */
}
This makes it so the main content is, at a minimum, the size of the screen minus the header and the footer size, thus pushing the footer to the bottom of the page.
As for the rest of your code, it looks fine to me.
body {
margin: 0;
padding: 0;
background: #85dcb8;
}
header {
background: coral;
padding: 1px;
margin: 0px;
text-align: center;
border-bottom: black 4px solid;
float: center;
}
header h1 {
margin: 0px;
}
header p {
border-bottom: solid 5px black;
display: inline-block;
padding-bottom: 10px;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
width: 70%;
margin-left: 20%;
}
.side-bar {
grid-gap: 2px;
padding-left: 10px;
float: left;
}
.links {
display: block;
width: 100%;
padding: 10px 20px;
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: red;
}
a:hover {
color: blue;
text-decoration: underline;
}
footer {
background-color: #000000;
color: #fff;
line-height: normal;
word-spacing: 2px;
text-align: center;
padding: 50px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Web Page</title>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, ab!
</p>
</header>
<aside>
<div class="side-bar">
<div class="links">Page 1</div>
<div class="links">Page 2</div>
<div class="links">Page 3</div>
<div class="links">Page 4 </div>
<div class="links">Page 5</div>
<div class="links">Page 6</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
<div class="links">Page 7</div>
<div class="links">Page 8</div>
<div class="links">Page 9</div>
<div class="links">Page 10</div>
</div>
</aside>
<section>
<div class="container">
<div>
<h2>Heading 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 3</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 4</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 5</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
<div>
<h2>Heading 6</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum facilis possimus consequuntur optio libero. Beatae praesentium officia quos odio saepe.
</p>
</div>
</div>
</section>
<footer>
This webpage officialy belongs to Anirudh. Copyrights since 2020 ©
</footer>
</body>
</html>
body{
margin: 0;
padding: 0;
}
.bg-color{
background: linear-gradient(180deg, #BA894D 0%, #FFBC6A 100%);
}
.main-content{
display: flex;
justify-content: center;
align-items: center;
}
.main-content div{
max-width: 595px;
margin-bottom: 100px;
text-align: center;
}
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 bg-color">
<div class="main-content">
<div>
<img src="./download.jpeg" alt="LOGO" class="img-fluid">
<h5>Brand Name</h5>
<h3>Build your own shop</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque inventore perferendis sit optio vero totam voluptatibus alias expedita, in neque natus, rerum officia nobis nihil, sapiente maxime beatae porro perspiciatis.</p>
</div>
</div>
</div>
<div class="col-lg-7">
<h1>CONTACT US</h1>
</div>
</div>
</div>
It is a contact form with 2 columns, One side is logo and text with the background of full height and one side is formed with inputs like name, email I want to center the logo and text below vertically and horizontally with a background color of 100% height.
body{
margin: 0;
padding: 0;
}
.contact{
min-height: 100vh;
}
.bg-color{
background: linear-gradient(180deg, #BA894D 0%, #FFBC6A 100%);
}
.main-content{
display: flex;
justify-content: center;
align-items: center;
}
.main-content div{
max-width: 595px;
text-align: center;
}
<div class="container-fluid">
<div class="row contact">
<div class="col-lg-5 bg-color main-content">
<div>
<img src="./download.jpeg" alt="" class="img-fluid">
<h5>Brand Name</h5>
<h3>Build your own shop</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque inventore perferendis sit optio vero totam voluptatibus alias expedita, in neque natus, rerum officia nobis nihil, sapiente maxime beatae porro perspiciatis.</p>
</div>
</div>
<div class="col-lg-7">
<h1>CONTACT US</h1>
</div>
</div>
</div>
I think this is what you are expecting.
I am trying to set 3 columns in a row with same height. Everything works so far using flex and fixed height except that paragraph is cut out. Both the title and text could be of various length. Currently .btn-wrapper has padding-top which gives illusion of space around. Is there a way to fix that so that all letters are visible? It doesnt matter how paragraph ends, only that there is a space between button and the text.
Is there a better way to go around this?
http://codepen.io/anon/pen/QKbAwb?editors=1100
<div class="col col-md-4">
<div class="col-inside">
<p>Lorem ipsum..../p>
<div class="btn-wrapper">
Read more
</div>
</div>
</div>
.col {
display: flex;
}
.col-inside {
flex: 1;
flex-direction: column;
height: 200px;
overflow: hidden;
position: relative;
}
.btn-wrapper {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 20px;
background-color: #fff;
}
Currently if the text is long it will be cut out like in this image
You don't need a fixed height, you need to extend the flex properties to the .row div.
This will automatically make all the columns the same height.
Oh and you don't need to position the button div either...flexbox can do that to.
.row {
display: flex;
}
.col {
padding: 0;
flex: 1;
display: flex;
flex-direction: column;
}
.col-inside {
border: 1px solid #999;
flex: 1;
display: flex;
margin: 0 10px;
flex-direction: column;
}
h2 {
margin-top: 0;
font-size: 26px;
font-weight: 600;
padding: 20px;
padding-bottom: 0;
}
.author {
font-style: italic;
font-size: 13px;
margin-bottom: 10px;
padding: 0 20px;
}
p {
padding: 0 20px;
}
.btn-wrapper {
margin-top: auto;
width: 100%;
padding-top: 20px;
background-color: #fff;
}
.btn.btn-default {
width: 100%;
display: block;
border-radius: 0;
background-color: grey;
color: #eee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col col-md-4">
<div class="col-inside">
<img src="http://placehold.it/420x150" class="img-responsive" />
<h2>Some title</h2>
<div class="author">John Smith</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui obcaecati dolores at cupiditate ullam quaerat earum, quaerat earum, magni explicabo eveniet saepe! quaerat earum, magni explicabo eveniet saepe! magni explicabo eveniet saepe!</p>
<div class="btn-wrapper">
Read more
</div>
</div>
</div>
<div class="col col-md-4">
<div class="col-inside">
<img src="http://placehold.it/420x150" class="img-responsive" />
<h2>Some title longer Some title longer Some title longer Some title longer</h2>
<div class="author">John Smith</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui cupiditate quaerat earum, magni explicabo eveniet saepe!</p>
<div class="btn-wrapper">
Read more
</div>
</div>
</div>
<div class="col col-md-4">
<div class="col-inside">
<img src="http://placehold.it/420x150" class="img-responsive" />
<h2>Some title</h2>
<div class="author">John Smith</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Qui obcaecati dolores at cupiditate ullam quaerat earum, magni explicabo eveniet saepe! amet, consectetur adipisicing elit. Qui obcaecati dolores Qui obcaecati dolores at cupiditate ullam
quaerat earum, magni explicabo eveniet saepe! quaerat earum, magni explicabo eveniet saepe! amet, consectetur adipisicing elit. Qui obcaecati dolores eveniet saepe! amet, consectetur adipisicing elit. Qui obcaecati dolores eveniet saepe! amet,
consectetur adipisicing elit. Qui obcaecati dolores</p>
<div class="btn-wrapper">
Read more
</div>
</div>
</div>
</div>
</div>
Codepen Demo