i want the content on my page to have a max-widht of 2024px, but i want my navbar to span the whole page
Unfortunately I have no idea how to solve it
Just put the content of your page in a main tag and set the max width of your main to 1024px
main {
max-width: 1024px;
}
nav {
width: 100%;
}
<html>
<body>
<header>
<nav>
<ul>
<li>Lorem</li>
</ul>
</nav>
</header>
<main>
<h1>Lorem</h1>
<p>Lorem</p>
</main>
</body>
</html>
<body>
<header>
<img src="" alt="Logo">
<nav>
<ul>
<li>
Home
</li>
<li>
<span>|</span>
</li>
<li>
Lorem Ipsum
</li>
<li>
<span>|</span>
</li>
<li>
Lorem Ipsum
</li>
<li>
<span>|</span>
</li>
<li>
Lorem Ipsum
</li>
<li>
<span>|</span>
</li>
<li>
Lorem Ipsum
</li>
</ul>
</nav>
</header>
<h1 id="main_title">
Lorem Ipsum
</h1>
<p id="main_text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod veritatis, aliquid omnis, autem quaerat culpa consectetur provident dicta repellat numquam eveniet distinctio. Accusantium exercitationem eos nam quia odit ipsa reprehenderit?
</p>
</body>
</html>
body {
background-color: #242424;
max-width: 1024px;
}
header {
z-index: 99;
display: flex;
border-bottom: #242424;
box-shadow: 0px 4px 20px #000000;
align-items: center;
justify-content: space-between;
position: fixed;
width: 100%;
top: 0;
backdrop-filter: blur(25px);
img {
width: 100px;
padding: .75rem
}
nav {
margin: 0 3rem 0 0;
ul {
li {
display: inline;
list-style-type: none;
padding: 0 .5rem 0 .5rem;
a {
font-size: 1.3rem;
transition: 2s;
::hover {
transform: translateX(10px);
}
}
span {
font-size: 1.5rem;
color: #fff;
}
}
}
}
}
Related
I am just a student, so please be mindful of that, I am trying my best to learn how to code.
I have to create a website as part of my project and I am just having an issue with the footer. The information does not seem to be aligning properly, all the information is stuck to the right side of the page and my things are not aligning themselves properly. I want the links under quick links to align directly and the white line to go underneath both the about and quick links section. I have tried to make rows, columns, I played with padding, margins, nothing is working so please if anyone can help me I would deeply appreciate it. I will attach my CSS and HTML just so you can see.
I will also attach an image so you get an idea of what it currently looks like:
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="footer column 1">
<h6>About</h6>
<p class="text-justify">Construction estimation is agreat company lol Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus consectetur recusandae perspiciatis repellendus iure vero error dignissimos officiis atque est libero neque soluta eum vel autem dolores, adipisci voluptatum quibusdam.</p>
</div>
<div class="footer column 2">
<h6>Quick Links</h6>
<div>
<ul class="footer-links">
<li>Home Page</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<hr>
<br><br><br>
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
Construction Estimation
</p>
</div>
</div>
</div>
</div>
</footer>
.site-footer {
background-color: #26272b;
padding: 45px 0 20px;
font-size: 15px;
height: 400px;
line-height: 26px;
color: #737373;
}
.site-footer hr {
border-top-color: #bbb;
opacity: 0.5;
}
.site-footer hr.small {
margin: 10px 0;
}
.site-footer h6 {
color: #fff;
font-size: 16px;
text-transform: uppercase;
margin-top: 5px;
letter-spacing: 2px;
}
.site-footer a {
color: #737373;
}
.site-footer a:hover {
color: teal;
text-decoration: none;
}
.footer-links {
padding-left: 0;
list-style: none;
}
.footer-links li {
display: block;
}
.footer-links a {
color: #737373;
}
.footer-links a:active,
.footer-links a:focus,
.footer-links a:hover {
color: teal;
text-decoration: none;
}
.footer-links.inline li {
display: inline-block;
}
after suggestions, it looks like this, which is better, but still a smidge off
try moving hr tag and copyright p tag out of the row div.
body {
margin: 0;
}
.row {
display: flex;
align-items: flex-start;
}
.column-1 {
width: 60%;
}
.column-2 {
width: 40%;
}
.site-footer {
background-color: #26272b;
padding: 45px 0 20px;
font-size: 15px;
height: 400px;
line-height: 26px;
color: #737373;
}
.site-footer hr {
border-top-color: #bbb;
opacity: 0.5;
}
.site-footer hr.small {
margin: 10px 0;
}
.site-footer h6 {
color: #fff;
font-size: 16px;
text-transform: uppercase;
margin-top: 5px;
letter-spacing: 2px;
}
.site-footer a {
color: #737373;
}
.site-footer a:hover {
color: teal;
text-decoration: none;
}
.footer-links {
padding-left: 0;
list-style: none;
}
.footer-links li {
display: block;
}
.footer-links a {
color: #737373;
}
.footer-links a:active,
.footer-links a:focus,
.footer-links a:hover {
color: teal;
text-decoration: none;
}
.footer-links.inline li {
display: inline-block;
}
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="footer column-1">
<h6>About</h6>
<p class="text-justify">Construction estimation is agreat company lol Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus consectetur recusandae perspiciatis repellendus iure vero error dignissimos officiis atque est libero neque soluta eum vel autem dolores, adipisci voluptatum quibusdam.</p>
</div>
<div class="footer column-2">
<h6>Quick Links</h6>
<div>
<ul class="footer-links">
<li>Home Page</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<hr>
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
Construction Estimation
</p>
</div>
</footer>
check out the demo
Since you are a student I reindented correctly your code in the following block and added some questions to help you spot the problem and refactor your code yourself.
I strongly suggest you to always keep correct indentation in code, especially in HTML, since it helps spotting structure problems.
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="footer column 1">
<h6>About</h6>
<p class="text-justify">Construction estimation is agreat company lol Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus consectetur recusandae perspiciatis repellendus iure vero error dignissimos officiis atque est libero neque soluta eum vel autem dolores, adipisci voluptatum quibusdam.</p>
</div>
<div class="footer column 2">
<h6>Quick Links</h6>
<div>
<ul class="footer-links">
<li>Home Page</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
<!-- If the following blocks are inside column 2, can they go under both columns? -->
<hr>
<br>
<br>
<br>
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
Construction Estimation
</p>
</div>
</div> <!-- Where is the starting tag of this? -->
</div> <!-- /row -->
</div> <!-- /container -->
</footer>
I have the majority of my code wrapped in a container with the following style:
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
This is to enable me to scroll smoothly from one section of the page that takes up a height of 100vh to another. (That is why I have overflow: auto in my styling). However, when I add the "overflow: auto", the web page stops being the full width of my window (as shown in the image).
screenshot of problem
When I remove the "overflow: auto" and replace it with "overflow: none", then the width is fixed but my scrolling feature now longer works.
HTML Code here:
<body class="container-fluid">
<!-- Main Page -->
<div class="container">
<div class="section">
<div class="main row vertical-center">
<div class="main-image col-md-6">
<img src="rec/img/placeholder-image.png" alt="client_image">
</div>
<div class="main-text align-items-center col-md-6">
<h2 class="p-3">
Name Lastname
</h2>
<span class="align-bottom bottom-text-main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis nostrum illo? Vero necessitatibus accusamus ullam commodi, consequatur corrupti. Recusandae eligendi eaque possimus minima numquam dignissimos cumque adipisci tempora temporibus.
</span>
</div>
<span id="contact">
<!-- <ul class="contact-icons" style="list-style-type:none;">
<li></li></li>
<li></li>
<li></li>
</ul> -->
<i></i>
<i></i>
<i></i>
</span>
</div>
</div>
<!-- Information -->
<div class="section info">
<div class="information p-4 pb-0" id="information">
<h1 >More about me.</h1>
<br>
<div class="background ml-3">
<h5 class = "pb-1">Background</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facilis, est distinctio esse temporibus sint animi sunt veniam asperiores commodi quo numquam excepturi nemo ab, harum, nam possimus quas veritatis!</p>
</div>
<div class="skills ml-3">
<h5 class="pb-1">Skills</h5>
<ul>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
<li>Skill</li>
</ul>
</div>
</div>
</div>
<!-- Experience -->
<div class="section">
<div class="experience p-3" id="experience">
<h1 class="pt-3">Work experience</h1>
<br>
<div class="xp">
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, aliquid. Quidem, quae dolorem! Amet ea obcaecati nam quia aliquid, facilis dolorem ab velit optio. Accusamus quidem commodi rerum itaque incidunt?
</div>
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aperiam veritatis eos illo quo necessitatibus omnis illum iure impedit debitis, consectetur voluptatum quisquam, quae temporibus veniam. In minima quos perferendis.
</div>
<div class="workxp p-3 ml-3">
<h4 class = "pb-2">Lorem, ipsum.</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officiis alias architecto non iure, quia labore rem. Totam nulla qui exercitationem beatae, ab aperiam! Asperiores soluta nisi repudiandae odit doloribus.
</div>
</div>
</div>
</div>
<!-- Additional Inforation -->
<div class="section">
<div class="additional-info p-3" id="additional-info">
<h1>Additional Information</h1>
<!-- <h1 class="second-line-info">Information</h1> -->
<div class="additional-info-text text-left">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, pariatur!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, pariatur at. Fuga error impedit officiis!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor facilis tempora odit vel cum adipisci, aut ducimus illum ab tenetur quae temporibus non. Velit rerum ipsa quis, sint blanditiis doloremque repellendus aliquid eius amet exercitationem!</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem, ipsum dolor.</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="section" id="footer">
<footer class="page-footer font-small blue pt-4">
<div class="container-fluid text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Name Lastname</h5>
<p>Cliche Inspiritional Quote Here</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-6 mb-md-0 mb-9">
<!-- Links -->
<h5 class="text-uppercase">Contact Links</h5>
<ul class="list-unstyled">
<li>
<i> Facebook</i>
</li>
<li>
<i> Instagram</i>
</li>
<li>
<i> Email</i>
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
</footer>
</div>
</div>
Here is the CSS file:
body {
color: var(--grey);
width: 100%;
padding: 0;
margin: 0;
min-width: fit-content;
}
.container {
position: relative;
width: 100vh;
height: 100vh;
overflow: visible;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.container .section {
position: relative;
height: 100%;
width: 100%;
scroll-snap-align: start;
/* background-blend-mode: multiply; */
}
/* .container.section:nth-child(1) {
background: ;
background-size: cover;
background-attachment: fixed;
} */
.main {
background-color: var(--white);
padding-left: 0%;
padding-right: 0%;
margin-top: 0rem;
margin-bottom: 0rem;
height: 100vh;
}
.main-image {
padding-top: 0%;
margin-left: 0%;
padding-right: 0;
margin-bottom: 2rem;
height: 50%;
}
.main-image img {
height: 100%;
width: 100%;
margin-left: 0%;
margin-right: 0%;
}
.main-text {
padding-bottom: 2rem;
height: 50%;
/* margin-left: 5%;
margin-right: 5%; */
}
.main-text p {
vertical-align: middle;
}
.information {
background-color: var(--soft);
height: 100vh;
padding-top: 0;
}
.experience {
background-color: var(--white);
height: 100%;
}
.information h1 {
padding-top: 1rem;
}
.background {
padding-top: 3rem;
}
.skills ul {
list-style-type: none;
}
.skills {
padding-top: 3rem;
}
.additional-info {
background-color: var(--soft);
height: 100vh;
padding-top: 1rem;
}
.additional-info h1 {
color: var(--grey);
}
.second-line-info {
margin-left: 5rem;
}
.additional-info-text {
text-align: center;
padding-left: 2rem;
padding-right: 2rem;
}
.additional-info-text p {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
#footer {
height: 10vh;
}
.list-unstyled i {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
#media only screen and (min-width: 600px) {
html {
width: 100%;
}
body {
width: 100%;
padding: 0;
}
.main {
padding-top: 0%;
width: 100%;
}
.vertical-center {
display: flex;
align-items: center;
}
.main-image {
height: 100%;
margin-top: 15%;
}
.main-image img {
border-radius: 50%;
height: 50%;
width: 75%;
}
.main-text {
height: 100%;
margin-top: 20%;
}
.main-text h2 {
margin-bottom: 3rem;
}
#contact {
position: absolute;
bottom: 2%;
right: 2%;
}
.contact-icons {
padding: 0;
font-size: 2em;
display: table-cell;
}
.fa {
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.contact a {
display: inline-block;
width: 1.2em;
transition: all .2s ease-in-out;
}
a:hover {
text-decoration: none;
}
.additional-info {
text-align: left;
justify-content: left;
}
.additional-info-text p {
margin-top: 2rem;
}
/* BEVAN ONDER */
/* General */
body, html
{
width: 100%;
padding: 0;
margin:0;
}
.container{
width: 100%;
}
.container.section{
width: 100%;
}
/* Information page(s) */
.background{
padding-top: 2rem;
}
.skills{
padding-top: 2rem;
}
.background p{
width: 50%;
}
}
Is there a possible fix for this?
Use this css value
overflow:scroll
or
overflow:visible
Keeping them auto will let browser decide the overflow.
I personally never use auto value.
try this
overflow:scroll;
width:100vw
if didn't work please edit post and add html
I want to place 3 different divs next to each other with a background color.
I tried floating everything to the left and it works but the background color disappears. If I don't float them, they are lined up under each other but the background color is there.
.wrapper {
width: 1222px;
margin: auto;
}
.footer {
background-color: #6d757c;
}
footer .footercategory {
float:left;
}
.footercategory li {
color: black;
font-family: NewsGothicBTWebCondRegular, "Trebuchet MS", Arial, sans-serif;
font-size: 1.3em;
padding: 0 10px 0 10px;
}
<footer class="footer">
<section class="wrapper">
<div class="footercategory">
<div>
<h1>Payment</h1>
<ul>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
</ul>
</div>
</div>
<!-- ROW 2 -->
<div class="footercategory">
<div>
<h1>Unsere Zahlarten</h1>
<ul>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
</ul>
</div>
</div>
<!-- ROW 3 -->
<div class="footercategory">
<div>
<h1>Unsere Zahlarten</h1>
<ul>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
</ul>
</div>
</div>
</section>
</footer>
If I float all left they are next to eachother but with no background
This can be done easily with the use of flex. Making your .wrapper class use flexbox will align the child elements next to each other. For the background colour, if you're wanting the background to remain consistent across all 3 columns, then set background-color on the footer element. Else, if you wish the background colours to differ, set each one separately on each .footercategory class.
.footer {
background-color:#6d757c;
}
.wrapper {
display:flex;
}
.footercategory {
flex:1;
}
<footer class="footer">
<section class="wrapper">
<div class="footercategory">
<div>
<h1>Payment</h1>
<ul>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
</ul>
</div>
</div>
<!-- ROW 2 -->
<div class="footercategory">
<div>
<h1>Unsere Zahlarten</h1>
<ul>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
</ul>
</div>
</div>
<!-- ROW 3 -->
<div class="footercategory">
<div>
<h1>Unsere Zahlarten</h1>
<ul>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
<li>
<span>Lastschrift</span>
</li>
</ul>
</div>
</div>
</section>
</footer>
This is how I would flex three div's side-by-side, I have also added in some responsiveness just so you get an idea of how you can manipulate the boxes at different size screens.
.section {
width: 100%;
margin: 0 auto;
}
.section .section-inner {
width: 100%;
max-width: 1248px;
margin: 0 auto; /* centers container */
padding: 10px; /* this combined with the margin in the divs will make the margins appear consistent */
box-sizing: border-box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row; /* sort into rows */
align-items: center;
justify-content: space-between;
text-align: center;
background-color: rgba(255,100,100,0.25);
}
.section .section-inner div {
width: calc((100% / 3) - 20px); /* calculate width for maximum accuracy | minus margin */
margin: 10px; /* space between boxes */
padding: 20px; /* space inside boxes */
box-sizing: border-box; /* calculates border and padding in width */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: column; /* sort into columns */
align-items: center;
justify-content: center;
flex-grow: 1; /* forces singular div that falls beneath to be full width */
background-color: rgba(0,0,0,0.25);
}
#media screen and (min-width: 640px) and (max-width: 1023px) {
.section .section-inner div {
width: calc((100% / 2) - 20px); /* calculate width for maximum accuracy | minus margin */
}
}
#media screen and (max-width: 639px) {
.section .section-inner div {
width: 100%; /* calculate width for maximum accuracy | minus margin */
}
}
.section .section-inner div h1 {
margin-bottom: 20px;
}
<section class="section">
<div class="section-inner">
<div>
<h1>Lorem ipsum </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
</div>
<div>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
</div>
<div>
<h1>Lorem ipsum </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
</div>
</div>
</section>
Modify style as -
.footer {
background-color: #6d757c;
height: auto;
float: left;
}
This will apply same color across the footer.
Add background-color that you want to add to the <section class="wrapper"></section> tag and give a width of 100%.
then If you use bootstrap give class md-col-4 for each divs.
If you don't use bootstrap give the width manually like width: 33% and display: inline-block to each divs
My image which is in the head touches on the next block (seaction features). (image-phone)
https://imgur.com/a/CeOakka
I tried change types of position,z-index. If i cut the image its not cool and easy to fix ;)
And how can i variable my image: div-class or just img tag? In my code i just variable img with class without div blocks. Is it clean?
<div class="container">
<nav id="main-nav">
<ul class="menu">
<li>Tour</li>
<li>Features</li>
<li>Pricing</li>
<li>
<h2 class="logo">NEWPROVIDENCE</h2>
</li>
<li>Help</li>
<li>Contact</li>
<i class="fab fa-apple fa-1x"></i>Get app
</ul>
</nav>
<div class="showcase">
<h1>What happen tomorrow?</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas, ex maxime! Natus earum praesentium officiis adipisci qui nisi ut, laboriosam labore optio. Non quidem assumenda dolore consectetur, corrupti quae delectus.</p>
<i class="fas fa-play"></i>Watch Video
</div>
<img src="https://imgur.com/a/Ees14KN" class="phone-img" alt="">
</div>
</header>
<section id="main-features">
<div class="container">
<div class="features">
<div class="feature">
<i class="fas fa-clock fa-2x"></i>
<h2 class="m-heading">Real time all the time</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro sunt soluta praesentium earum iusto hic?</p>
</div>
<div class="feature">
<i class="fas fa-clock fa-2x"></i>
<h2 class="m-heading">Real time all the time</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro sunt soluta praesentium earum iusto hic?</p>
</div>
</div>
<hr>
</div>
</section>
header {
background: url('../img/bg-header.png') no-repeat center center / cover;
height: 100vh;
}
#main-nav {
display: flex;
justify-content: space-between;
padding: 2rem;
}
#main-nav ul {
display: grid;
grid-template-columns: repeat(3, auto) 1fr repeat(3, auto);
width: 100%;
list-style: none;
align-items: center;
text-align: center;
}
#main-nav ul li a {
padding: 0.75rem;
font-size: 16px;
margin: 0 0.25rem;
color: #26272d;
}
#main-nav ul li a:hover {
color: #bebebf;
}
.phone-img {
display: block;
margin: 0 auto;
}
You could try to put the phone image inside of a div as a background image instead of embedding it into the html on the page.
If you remove the image from the html and add a div class="phone-image"(for example) instead, you can control the height and width of the div and add this to the css:
div .phone-image {
background: url(../path-to-your-images-folder/images/yourphoto.jpg);
background-size: cover;
height: 100px; /* for example */
width: 40%; /* for example 40% of the container width */
}
You would also have to position it correctly on top of the other image by using a higher z-index and position: absolute; and then play around with top, bottom, left and right values (https://medium.freecodecamp.org/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd)
I want to create equal height items inside a column. It's easy when i only have the title and price. The i can just flex grow the title, and i go my equal height.
The issue is when i also have a description.
Title
Price
Desc
There are two example, because i've tried both.
One example with all content inside one item, and the another example where the content is splittet into two item.
I've a equal height jQuery script, but want to use Flex if possible.
There's colors on all elements to see if the have equal heights.
I've my code on codepen, but i'll paste it in here also.
* {
box-sizing: border-box;
}
.container {
background: tomato;
padding: 20px;
max-width: 600px;
margin: auto;
}
.container:not(:first-of-type) {
margin-top: 40px;
}
.container ul {
margin: unset;
padding: 0;
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.container ul li {
display: flex;
flex-direction: column;
width: 32%;
background: #fff;
padding: .3em;
}
.container ul li h2 {
margin: 0;
}
.container.one ul li a {
background: lightgreen;
}
.container.one ul li a h2, .container.one ul li a p {
background: pink;
}
.container.one ul li a span {
background: lightblue;
}
.container.one .loop--item * {
display: flex;
flex-direction: column;
}
.container.one .loop--item--product-link {
height: 100%;
}
.container.one .loop--item--product-link h2 {
flex: 1;
}
.container.two .title-price {
background: green;
}
.container.two .desc {
background: blue;
}
.container.two ul li a {
background: lightgreen;
}
.container.two ul li a h2, .container.two ul li a p {
background: pink;
}
.container.two ul li a span {
background: lightblue;
}
.container.two .loop--item--product-link {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.container.two .loop--item--product-link div.title-price {
padding: 10px;
display: flex;
flex-direction: column;
flex: 1;
}
.container.two .loop--item--product-link div.title-price h2 {
flex: 1;
}
.container.two .loop--item--product-link div.desc {
padding: 10px;
}
<h1 style="text-align:center;">Equal height: Title, Price, Description</h1>
<!-- Container ONE -->
<div class="container one">
<h1>Content in same box</h1>
<ul class="loop">
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<h2>Overskrift</h2>
<span>17.000 kr. - 24.000 kr.</span>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</a>
</li>
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<h2>Her er en overskrift som er lidt længere</h2>
<span>17.000 kr. - 24.000 kr.</span>
<p>elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</a>
</li>
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<h2>Her er en overskrift </h2>
<span>17.000 kr. - 24.000 kr.</span>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</a>
</li>
</ul>
</div>
<!-- Container TWO -->
<div class="container two">
<h1>Content in two boxes</h1>
<ul class="loop">
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<div class="title-price">
<h2>Overskrift</h2>
<span>17.000 kr. - 24.000 kr.</span>
</div>
<div class="desc">
<p>Lorem ipsum dolor, sit amet consectetit maiores!</p>
</div>
</a>
</li>
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<div class="title-price">
<h2>Her er en overskrift</h2>
<span>17.000 kr. - 24.000 kr.</span>
</div>
<div class="desc">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</div>
</a>
</li>
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<div class="title-price">
<h2>Her er en overskrift</h2>
<span>17.000 kr. - 24.000 kr.</span>
</div>
<div class="desc">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad</p>
</div>
</a>
</li>
</ul>
</div>
As Paulie_D says, there is no way in the CSS to do it unless the elements share a parent.
In modern browsers, however, you can flatten your DOM tree, and make some elements disappear using display: contents.
One posible solution using this approach (getting rid of li and a)
* {
box-sizing: border-box;
}
.container {
background: tomato;
padding: 20px;
max-width: 600px;
margin: auto;
}
.container:not(:first-of-type) {
margin-top: 40px;
}
.container ul {
margin: unset;
padding: 0;
list-style-type: none;
display: grid;
grid-template-rows: repeat(3, auto);
grid-template-columns: repeat(3, auto);
grid-gap: 10px;
}
.container ul li,
.container ul li a {
display: contents;
}
.container ul li h2 {
margin: 0;
}
.container.one ul li a h2 {
grid-row: 1;
background: pink;
}
.container.one ul li a p {
grid-row: 3;
background: pink;
}
.container.one ul li a span {
grid-row: 2;
background: lightblue;
}
<h1 style="text-align:center;">Equal height: Title, Price, Description</h1>
<!-- Container ONE -->
<div class="container one">
<h1>Content in same box</h1>
<ul class="loop">
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<h2>Overskrift</h2>
<span>17.000 kr. - 24.000 kr.</span>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</a>
</li>
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<h2>Her er en overskrift som er lidt længere</h2>
<span>17.000 kr. - 24.000 kr.</span>
<p>elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</a>
</li>
<li class="loop--item">
<a href="#" class="loop--item--product-link">
<h2>Her er en overskrift </h2>
<span>17.000 kr. - 24.000 kr.</span>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
</a>
</li>
</ul>
</div>