How can I ensure the nav stretches to the bottom of every page dynamically? I’m pretty new to CSS and HTML so forgive me if anything is obviously wrong. But I can’t figure this out for the life of me. Codepen: https://codepen.io/kekprod/pen/QWRgrMq
I tried to use Height: auto and 100% but they don’t work, and 100vh doesn’t stretch the entire page
Here’s what I desire: Image (The red is the column/nav beneath the menu stretching down to the bottom of all pages
* {
padding: 0;
margin: 0;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
body {
padding: 0 10%;
background-color: #fff;
margin: 0;
}
header {
display: flex;
background-color: #2c2513;
color: white;
cursor: default;
}
header div:nth-child(1) {
flex-grow: 1;
margin-left: 2em;
/* border: green solid 1px; */
}
header div:nth-child(2) {
display: flex;
flex-grow: 5;
font-size: 200%;
align-items: center;
justify-content: center;
/* border: red solid 1px */
}
header div:nth-child(3) {
display: flex;
flex-grow: 1;
/* border: blue solid 1px; */
align-items: end;
justify-content: end;
padding: 1em;
max-width: 350px;
}
nav ul {
overflow: hidden;
list-style-type: none;
}
li a {
text-decoration: none;
display: block;
font-size: 1.2em;
padding: .5em;
background-color: #ffda72;
color: black;
border-top: #2c2513 solid 1px;
}
nav {
width: 15%;
float: left;
border: #2c2513 solid 1px;
background-color: #bda666;
box-sizing: border-box;
height: 100%;
}
header img {
width: 52%
}
main {
background-color: #dbc077;
margin-left: 15%;
box-sizing: border-box;
border: 1px #000 solid;
}
.smallbutton {
width: 8%;
margin: 0 0.2em;
display: inline;
transform: translate(-.5em, .2em)
}
.banner img,
.contactusbanner img {
width: 100%;
}
.middletext {
padding: 1em 0 0 1em;
}
.margin4text {
margin: 3em;
/* display: flex; */
}
.margin4text p {
line-height: 1.5em;
padding-top: 1em;
}
.shoesContainer1,
.shoesContainer2 {
padding: 0em 1em 1em 1em;
display: flex;
flex-wrap: wrap;
}
.shoe-item {
background-color: #fff;
border: 1px solid #000;
padding: 20px;
margin: 1em;
font-size: 30px;
max-width: 300px;
min-height: 0
}
footer {
background-color: #dbc077;
padding: 1em;
border: 1px solid #000;
font-size: 0.75em;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Tip Toe Soles</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div>
<h2>TipToe Soles</h2>
</div>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="mens.html">Men's Shoes</a></li>
<li><a href="womens.html">Women's Shoes</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="feedback.html">Feedback</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
</ul>
</nav>
<main>
<div class="banner">
<a href="index.html"><img src="images/banner2.png" alt="Welcome banner"></a>
</div>
<div class="shopButtons">
<div class="shop-button">
<a href="mens.html"><img src="images/shopmens.png" alt="Shop Men's Shoes button"></a>
</div>
<div class="shop-button">
<a href="womens.html"><img src="images/shopwomens.png" alt="Shop Women's Shoes button"></a>
</div>
</div>
<div class="margin4text">
<h1>What is TipToe Soles?</h1>
<p>Hey there! Welcome to TipToe Soles - your new favorite spot for comfy kicks that won't break the bank. Based in Sydney, Australia, we're all about bringing you shoes that feel as good as they look. Whether you're 30 or 100, our daily wear collection
is designed for your comfort and style needs.</p>
</div>
<div class="banner">
<a href="products.html"><img src="images/banner3.png" alt="latest arrivals banner"></a>
</div>
<h1 class="middletext">Check out our latest arrivals, introducing the Sallys and Heavenlys!</h1>
<div class="shoesContainer1">
<a href="sallyblacks.html">
<div class="shoe-item"><img src="images/Sally_Black.png" alt="Sally Black womens shoes">
<p>Sally Blacks</p>
</div>
</a>
<a href="heavenlyblacks.html">
<div class="shoe-item"><img src="images/Heavenly_Black.png" alt="Heavenly Black womens shoes">
<p>Heavenly Blacks</p>
</div>
</a>
<a href="sallytans.html">
<div class="shoe-item"><img src="images/Sally_Tan.png" alt="Sally Tan womens shoes">
<p>Sally Tans</p>
</div>
</a>
</div>
</main>
<footer>
<a href="returnpolicies.html">Return Policies</a> | <a href="exchangepolicies.html">Exchange Policies</a> | <a href="deliverypolicies.html">Delivery Policies</a><br><br> © Tip Toe Soles 2024
</footer>
</body>
</html>
2
Answers
Never align elements next to each other with
float.floatis for floating a block within flow-text such as an image within a newspaper. What you actually should use here to align thenavandmainnext to each other is by using CSS-Grid:display: grid.For responsive reasons so that your navbar is not cut off on small screens I used 2 columns:
grid-template-columns: minmax(15%, auto) 1fr;That way the navbar will be at least 15% wide but grow to be fully visible if needed. The main takes 1fr (1 fraction) width and will occupy the remaining space.Both the
headerandfooterusinggrid-column: span 2;to occupy both columns.I also removed a few unnecessary CSS lines.
PS: I reordered your CSS. For readability you should list your selectors in the order of their appearance and group them that way. you had a header selector somewhere below the main and the nav selector also somewhere below. It was harder to find them that way.
This looks like a perfect use-case for CSS Grid!
We use the following properties:
display: grid;grid-templategrid-template-areasgrid-areaLet’s start by defining the rows and columns of our grid on the
<body>:Now we need to tell CSS Grid which elements belong in the "areas" we defined above:
(Also, we’ll remove the
margin-leftfrom<main>andwidthandfloatfrom<nav>since those aren’t needed anymore)