I'm new to the CSS and so confused about it! Please tell me what am I doing wrong here and teach me what I should know!
here is the preview-
This is the html and css code-
index.html-
<section class="section-1">
<img class="logo" src="./Assets/Asset 2#3x.png" width="320" alt="Brand Icon">
<p class="description">Luxury Jewelry Store</p>
<nav class="navbar">
Home
My Cart
My Orders
FAQs
About Us
<div class="search">
<i class="fa-solid fa-magnifying-glass searchIcon"></i>
<input class="searchBox" placeholder="Search..." type="search">
<input type="submit" value="Search" class="searchButton">
</div>
</nav>
</section>
styles.css-
.section-1{
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.navbar{
display: flex;
align-items: center;
width: 100%;
background-color: #92A9BD;
}
I am trying to get the navbar to the bottom of the page. I think I'm getting confused in flex. I tried adding
justify-self:center;
but then I found out that it doesn't work in flex. So what I should do now in this case?
And also how can I make navbar stick to the top when I scroll down?
You can fix your problem by using position: absolute.
First, you give the relative position to the section tag so that the navbar is positioned based on it.
Then you give position: absolute and bottom: 0 to navbar.
like this:
.section-1{
position: relative;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.navbar{
position: absolute;
bottom: 0;
display: flex;
align-items: center;
width: 100%;
background-color: #92A9BD;
}
If you want, you can achieve this result by using display: flex.
You should do this:
CSS:
.section-1 {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.navbar {
display: flex;
align-items: center;
width: 100%;
background-color: #92A9BD;
}
HTML:
<section class="section-1">
<div>
<img class="logo" src="./Assets/Asset 2#3x.png" width="320" alt="Brand Icon">
<p class="description">Luxury Jewelry Store</p>
</div>
<nav class="navbar">
Home
My Cart
My Orders
FAQs
About Us
<div class="search">
<i class="fa-solid fa-magnifying-glass searchIcon"></i>
<input class="searchBox" placeholder="Search..." type="search">
<input type="submit" value="Search" class="searchButton">
</div>
</nav>
</section>
But the point is that the first DIV sticks to the top of the page.
Related
I'm trying to build a product landing page as a certificate project for freeCodeCamp.
I can't understand how to fix the icons to the left, while fixing the feature and price to the center. And I can't understand why my li items are overflowing over their container.
I tried all the overflow and wrap tags I know but I can't work it out.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
}
#logo {
position: absolute;
width: 25%;
left: 0;
height: auto;
image-resolution: 100%;
}
header {
width: 100%;
display: flex;
justify-content: space-evenly;
}
.navspace {
justify-content: end;
position: relative;
right: -15%;
}
nav {
positio: relative;
}
ul {
display: flex;
list-style: none;
}
li {
margin: 40px;
}
.product {
position: absolute;
top: 15%;
}
#leads {
width: 100vw;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
}
.title {
padding: 2%;
}
#logo-green {
width: 5vw;
height: auto;
margin-right: 5vw;
}
#Features {
margin-left: 27%;
display: flex;
align-items: left;
justify-content: left;
text-align: left;
padding: 5%;
}
#Price {
display: flex;
align-items: center;
justify-content: left;
text-align: center;
padding: 3%;
margin-left: 27%;
}
.price {
display: flex;
flex-direction: column;
text-align: left;
}
.pricelist {
width: 100%;
max-height: 400px;
text-align: center;
position: absolute;
display: inline-flex;
justify-content: center;
}
.class {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 20px;
}
.class>h1 {
width: 100%;
height: 10%;
background-color: blanchedalmond;
padding: 2%;
font-size: large;
}
#medium,
#pika,
#base {
display: flex;
flex-direction: column;
}
.class>h2 {
margin: 5% 0 5% 0;
}
.class>ul {
display: grid;
display: flex;
justify-content: center;
flex-direction: column;
gap: 2px;
}
.class>li {
position: relative;
}
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<!-- tabella nav -->
<header>
<div>
<img id="logo" src="img/LIGHTSPEED.png" alt="" />
</div>
<!-- bhr -->
<div class="navspace">
<nav id="nav-link">
<ul>
<li>Features</li>
<li>Price</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<main class="product">
<!-- form -->
<section id="leads">
<h2 class="title">Most efficient way to light your life</h2>
<form action="">
<input class="email" type="email" required placeholder="Enter your email" columns="10">
<input class="submit" type="submit" value="Get Shocked">
</form>
</section>
<!-- features -->
<section>
<div id="Features">
<div id="green">
<img id="logo-green" src="img/294432.png" alt="">
</div>
<div class="feature">
<h2>Only from renovable energy</h2>
<p>Coming from water and earth termal energy</p>
</div>
</div>
</section>
<!-- price -->
<section>
<div id="Price">
<div id="cheap">
<img id="logo-green" src="img/low-price.png" alt="">
</div>
<div class="price">
<h2>Prices you have never seen</h2>
<p>With our funding system you might get some solar panels</p>
<p>and who knows... we might pay you your energy.</p>
</div>
</div>
</section>
<div class="pricelist">
<div class="class" id="base">
<h1>BASE LEVEL</h1>
<h2>49€</h2>
<ul>
<li>Standart power transmission</li>
<li>Change power output by your personal profile</li>
<li>Client Support 10am-20am</li>
</ul>
</div>
<div class="class" id="medium">
<h1>MEDIUM LEVEL</h1>
<h2>59€</h2>
</div>
<div class="class" id="pika">
<h1>PIKACHU LEVEL</h1>
<h2>149€</h2>
</div>
</div>
</main>
A few things right off the bat, i've added some comments to your CSS. There's a lot going on here, and I think a lot of your styling is just working against you.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Montserrat', sans-serif;
}
#logo {
position: absolute;
width: 25%;
left: 0;
height: auto;
image-resolution: 100%;
}
header {
width: 100%;
display: flex;
justify-content: space-evenly;
}
.navspace {
justify-content: end;
position: relative;
right: -15%;
}
nav {
position: relative; /* <- mispelled positio[n] */
}
ul {
display: flex;
list-style: none;
}
li {
margin: 40px;
}
.product {
position: absolute; /* I hate position absolute. Hate it deeply. Basically refuse to use it. It never works the way I want it to. More on this in response below */
top: 15%;
}
#leads {
width: 100vw;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
}
.title {
padding: 2%;
}
#logo-green {
width: 5vw;
height: auto;
margin-right: 5vw;
}
#Features {
margin-left: 27%;
display: flex;
align-items: left;
justify-content: left;
text-align: left;
padding: 5%;
}
#Price { /* be careful, classes and Ids are case sensitive*/
display: flex;
align-items: center;
justify-content: left;
text-align: center;
padding: 3%;
margin-left: 27%;
}
.price {
display: flex;
flex-direction: column;
text-align: left;
}
.pricelist {
width: 100%;
max-height: 400px;
text-align: center;
position: absolute;
display: inline-flex; /* technically, unless this object has a sibling, making it inline-flex while it is position: absolute; won't really change anything... though it could in unexpected ways. More below*/
justify-content: center;
}
.class {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 20px;
}
.class>h1 {
width: 100%;
height: 10%;
background-color: blanchedalmond;
padding: 2%;
font-size: large;
}
#medium,
#pika,
#base {
display: flex;
flex-direction: column;
}
.class>h2 {
margin: 5% 0 5% 0;
}
.class>ul {
display: grid;
display: flex;/* display grid is just being overridden by display flex here, so there's no point in keeping it */
justify-content: center;
flex-direction: column;
gap: 2px;
}
.class>li {
position: relative;
}
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<!-- tabella nav -->
<header>
<div>
<img id="logo" src="img/LIGHTSPEED.png" alt="" />
</div>
<!-- bhr -->
<div class="navspace">
<nav id="nav-link">
<ul>
<li>Features</li>
<li>Price</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<main class="product">
<!-- form -->
<section id="leads">
<h2 class="title">Most efficient way to light your life</h2>
<form action="">
<input class="email" type="email" required placeholder="Enter your email" columns="10">
<input class="submit" type="submit" value="Get Shocked">
</form>
</section>
<!-- features -->
<section>
<div id="Features">
<div id="green">
<img id="logo-green" src="img/294432.png" alt="">
</div>
<div class="feature">
<h2>Only from renovable energy</h2>
<p>Coming from water and earth termal energy</p>
</div>
</div>
</section>
<!-- price -->
<section>
<div id="Price">
<div id="cheap">
<img id="logo-green" src="img/low-price.png" alt="">
</div>
<div class="price">
<h2>Prices you have never seen</h2>
<p>With our funding system you might get some solar panels</p>
<p>and who knows... we might pay you your energy.</p>
</div>
</div>
</section>
<div class="pricelist">
<div class="class" id="base">
<h1>BASE LEVEL</h1>
<h2>49€</h2>
<ul>
<li>Standart power transmission</li>
<li>Change power output by your personal profile</li>
<li>Client Support 10am-20am</li>
</ul>
</div>
<div class="class" id="medium">
<h1>MEDIUM LEVEL</h1>
<h2>59€</h2>
</div>
<div class="class" id="pika">
<h1>PIKACHU LEVEL</h1>
<h2>149€</h2>
</div>
</div>
</main>
First off, while it is somewhat a personal choice and somewhat just the way most people use CSS these days: I hate position: absolute. It never acts the way you want it to, it's very difficult to get it to be responsive, and there are better ways to do it these days. The problem with absolute is that it simultaneously breaks an object out of the standard flow of the document, but it also gets rid of the object's ability to affect other objects in the document. This means that a div with position:absolute will no longer push down its sibling objects (things next to it), hold space within the parent object (the thing holding it will act like it has nothing inside it). While it's more complicated, using grid to break objects out of the normal document flow is more predictable.
Let's take a look at your code simply without position: absolute:
https://jsfiddle.net/slingtruchoice/sye5wbmu/
already, things aren't breaking outside of your boxes.
Your best bet to get things to align is to use use margin and display:block. Remember, inline items don't hold their own line in a document, they allow other inline items to butt up next to them in the same line, so they won't be affected by margin and padding in the same way. display:inline-block fixes some of that, but not everything.
i literally have this as a poster in my office. I've been doing this for ten years and still use it daily: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
if an item is overflowing out of the container, it's because the container isn't recognizing that it needs to be affected by the child's size. This either means that the parent has a fixed size that overrides the child's desire to make the parent bigger (like a pregnant lady wearing a corset, as my teacher always said... such a weird image).
It may also mean that the child's size isn't affecting things around it, such as a position:absolute or display:inline item that is acting weird. If you have display:flex and flex-wrap: nowrap on the parent, but the children are set to have a size larger than the parent object, then they will overflow.
I'm sure about what icons you are talking about, I would be happy to help you If can clarify the issue. Now about the why your li items are overflowing over their container.
In your CSS on the line number 94 and 103 you set max-height: 400px; and height: 300px; because of that your li items are overflowing.
One way you can fix this bye removing fix height and set the value height: auto; that will make the parent container automatically grow based on their child element, or you can give your ul element a class or ID and then set overflow-y: scroll; to that ID or class.
This is the code freecodecamp is using to design the middle section with the icon.
.grid {
display: flex;
}
#features .icon {
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: darkorange;
}
#features .desc {
display: flex;
flex-direction: column;
justify-content: center;
height: 125px;
width: 80vw;
padding: 5px;
}
<!-- Wrapper -->
<div class="grid">
<!-- Icon -->
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<!-- /Icon -->
<!-- Description -->
<div class="desc">
<h2>Premium Materials</h2>
<p> Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase. </p>
</div>
<!-- /Description -->
</div>
<!-- /Wrapper -->
Now let me explain what is going on here. The div with the class name grid is the parent element for both icon and the desc So they set display of grid to display: flex; and give both child element fix width width: 20vw; and width: 80vw;
And I like to add one little note, That If you are using position: absolute; to any element then It's a good idea to set Its parent to position: relative; That would make working with position a lot easier.
I have this on my codepen in which I was using flex to align items. What I want is to align items even with or without labels.
here is my html code:
<div class="parent-main">
<div class="child1">
<!--<label>checkbox</label> -->
<input type="text"/>
</div>
<div class="child2">
<label>checkbox</label>
<input type="checkbox"/>
</div>
<div class="child3">
<label>checkbox</label>
<input type="radio"/>
</div>
</div>
my css:
.parent-main {
display: flex;
justify-items: center;
border: solid 1px #ccc;
width: 55vh;
height: 25vh;
margin: 5px;
padding: 15px;
gap: 2px;
}
.child1 {
display: flex;
flex-direction: column;
/* position: relative;
top: 2px; */
}
.child2 {
display: flex;
flex-direction: column;
align-items: baseline;
}
.child3 {
display: flex;
flex-direction: column;
align-items: baseline;
}
Here is my codepen link: enter link description here
This is quite tricky on my side but I hope I can have your insights on this, been working this for 2 days now.
As you want to align the input of type "text" with the other div siblings but without it having any label element, we use a line break in order to mimic an empty blank space without any text element in it by using either <br> or
Tip:
Avoid duplication of codes in CSS properties, see the below snippet
.parent-main {
display: flex;
justify-items: center;
border: solid 1px #ccc;
width: 55vh;
height: 25vh;
margin: 5px;
padding: 15px;
gap: 2px;
}
.parent-main>div {
display: flex;
flex-direction: column;
}
.child2,
.child3 {
align-items: baseline;
}
<div class="parent-main">
<div class="child1">
<!--empty space -->
<br>
<!-- can also be used -->
<input type="text" />
</div>
<div class="child2">
<label>checkbox</label>
<input type="checkbox" />
</div>
<div class="child3">
<label>checkbox</label>
<input type="radio" />
</div>
</div>
This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Why is '::after' pseudo-selector over the image and not under it? [duplicate]
(3 answers)
Closed last year.
I am following a tutorial on Youtube to make a responsive website, so far so good. But I encountered a weird problem where I am trying to make a bottom gradient border. I followed the video and in it they used positon:absolute, which all worked great. But when I tried the same code it seems that the first element's border appears on the top while the others appear on the bottom. I figured out the solution by adding bottom: 0. But in the video the coder didn't add that, why so? I am guessing different browsers behave differently?
Here is the code I used for the markup:
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flex-jc-sb {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex-jc-c {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-ai-c {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header__links a {
font-size: 0.875rem;
position: relative;
}
.header__links a::before {
content: "";
position: absolute;
left: 0;
right: 0;
display: block;
height: 5px;
background: linear-gradient(to right, #31d35c, #2bb7da);
}
.header__links a:not(:last-child) {
margin-right: 32px;
}
<header class="header">
<nav class="flex flex-jc-sb flex-ai-c">
<a href="/" class="header__logo flex flex-ai-c">
<img src="images/logo.svg" alt="Easybank" />
</a>
<a href="#" class="header__menu hide-for-desktop">
<span></span>
<span></span>
<span></span>
</a>
<div class="header__links hide-for-mobile">
Home
About
Contact
Blog
Careers
</div>
<button type="button" class="hide-for-mobile header__cta">
Request Invite
</button>
</nav>
</header>
pseudo-elements are inline by default, so add display: inline-block; to .header__links a, and use :after if you want the content to come after (below) the text.
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flex-jc-sb {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex-jc-c {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-ai-c {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header__links a {
font-size: 0.875rem;
position: relative;
display: inline-block;
}
.header__links a:after {
content: "";
position: absolute;
left: 0;
right: 0;
display: block;
height: 5px;
background: linear-gradient(to right, #31d35c, #2bb7da);
}
.header__links a:not(:last-child) {
margin-right: 32px;
}
<header class="header">
<nav class="flex flex-jc-sb flex-ai-c">
<a href="/" class="header__logo flex flex-ai-c">
<img src="images/logo.svg" alt="Easybank" />
</a>
<a href="#" class="header__menu hide-for-desktop">
<span></span>
<span></span>
<span></span>
</a>
<div class="header__links hide-for-mobile">
Home
About
Contact
Blog
Careers
</div>
<button type="button" class="hide-for-mobile header__cta">
Request Invite
</button>
</nav>
</header>
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I'm creating a showcase with bootstrap 4. I want the showcase content to be centered.
so I'm using flexbox with align-items: center;. but for some reason it's not working.
Can some please explain what am I doing wrong?
#showcase {
position: relative;
background: url("https://source.unsplash.com/random") no-repeat center center/cover;
min-height: 350px;
}
#showcase .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
#showcase .showcase-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 540px;
height: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<header id="showcase" class="py-5">
<div class="overlay text-white text-center">
<div class="container">
<div class="showcase-content">
<h1 class="h2 mb-4">My Heading will go here</h1>
<div class="header-search w-100">
<form action="" method="get">
<input
type="search"
name="query"
placeholder="My input place holder"
id="query"
class="form-control"
/>
</form>
</div>
</div>
</div>
</div>
</header>
Your container class was not endowed with css rules. So I added flex to it to center it vertically using the justify-content: center rule. And in order to center it vertically, you need to add the rule height: 100%, since the child selector #showcase .showcase-content already contains flex rules, and it makes no sense to prescribe an align-item: center.
Add this selector to your css:
.container {
display: flex;
justify-content: center;
height: 100%;
}
#showcase {
position: relative;
background: url("https://source.unsplash.com/random") no-repeat center center/cover;
min-height: 350px;
}
#showcase .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
#showcase .showcase-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 540px;
height: 100%;
}
.container {
display: flex;
justify-content: center;
height: 100%;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<header id="showcase" class="py-5">
<div class="overlay text-white text-center">
<div class="container">
<div class="showcase-content">
<h1 class="h2 mb-4">My Heading will go here</h1>
<div class="header-search w-100">
<form action="" method="get">
<input
type="search"
name="query"
placeholder="My input place holder"
id="query"
class="form-control"
/>
</form>
</div>
</div>
</div>
</div>
</header>
Second solution:
#showcase {
position: relative;
background: url("https://source.unsplash.com/random") no-repeat center center/cover;
min-height: 350px;
}
#showcase .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
#showcase .showcase-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 540px;
height: 100%;
margin: auto; /*add this it*/
}
.container {
height: 100%; /*add this it*/
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<header id="showcase" class="py-5">
<div class="overlay text-white text-center">
<div class="container">
<div class="showcase-content">
<h1 class="h2 mb-4">My Heading will go here</h1>
<div class="header-search w-100">
<form action="" method="get">
<input
type="search"
name="query"
placeholder="My input place holder"
id="query"
class="form-control"
/>
</form>
</div>
</div>
</div>
</div>
</header>
You can give margin: auto; to your showcase-content class or you can give this style to your container:
.container {
display: flex;
align-items: center;
justify-content: center;
}
But because of you use bootstrap maybe this tip interrupt another codes, so you should make another container for you showcase-content into the container like this:
<div class="container">
<div class="show-case-container">
<div class="showcase-content">
</div></div></div>
I am using the skeleton CSS and I'm trying to get a div to be at the bottom of the page.
I have tried using position: absolute; bottom: 0; within the container has a relative position, but the div just aligns to the right-hand side of the page.
.page {
align-items: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
min-height: 100vh;
}
#home {
background: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<div class="page" id="home">
<div class="container" style="text-align: center;">
<div class="row">
I am a title in the middle of the page.
</div>
<div class="row" style="">
I want to be at the bottom of the page.
<br>
Click here!
</div>
</div>
</div>
Is this possible, please?
Take the Bottom text element out of the CONTAINER parent and place it as a child of the PAGE element, then position:absolute will work:
https://jsfiddle.net/akLr6zb0/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<div class="page" id="home">
<div class="container" style="text-align: center;">
<div class="row">
I am a title in the middle of the page.
</div>
</div>
<div class="bottom" style="">
I want to be at the bottom of the page.
<br>
Click here!
</div>
</div>
.page {
align-items: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
min-height: 100vh;
position: relative;
}
#home {
background: red;
}
.bottom {
bottom: 0;
display: block;
position: absolute;
}
position: absolute; bottom: 0; is right, but you also need to make sure the direct parent .container is the height of the page, and then center everything with display: flex:
.page {
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#home {
background: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<div class="page" id="home">
<div class="container" style="text-align: center;">
<div class="row">
I am a title in the middle of the page.
</div>
<div class="row" style="position: absolute; bottom: 0;">
I want to be at the bottom of the page.
<br>
Click here!
</div>
</div>
</div>
I am not sure if it's what you want but I achieve that with displaying the container as flex.
.page {
align-items: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
min-height: 100vh;
}
#home {
background: red;
}
.container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
position: absolute;
bottom: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<div class="page" id="home">
<div class="container">
<div class="row">
I am a title in the middle of the page.
</div>
<div class="row bottom" style="">
I want to be at the bottom of the page.
<br>
Click here!
</div>
</div>
</div>