So I'm making a basic layout. Which I usually take a creative commons layout but this time I decided to build my own.
So basically I am making a very basic page where there is a top section 100% width.
Then under that we have a display:table-cell section to place the two sections side by side.
This seems to work but my <h1></h1> is being placed at the bottom portion of the area. I want the content to be at the very top.
Here is my code:
section
{
display: block;
}
#instructions
{
width: 100%;
background-color: bisque;
height: auto;
padding: 20px;
}
#picture
{
width: 100% auto;
height: auto;
background-color: aliceblue;
padding: 30px;
border: 10px solid #000;
display: table-cell;
}
#content
{
width: 100%;
display: table-cell;
padding: 25px;
position: relative;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Alberta Map</title>
<meta name="description" content="Learning Alberta's Geography">
<link rel="stylesheet" href="main.css">
</head>
<body>
<section id="instructions">
<h1>Learning Altberta's Geography</h1>
<p>bla bla bla bla</p>
</section>
<section id="picture">
<img src="alberta.jpg"></img>
</section>
<section id="content">
<h1> Lake....</h1>
</section>
</body>
What this outputs is the following problem:
Ultimately I want the text on the content id to start at the top portion of the section.
What should I have done and why is the at the lower bottom of the section?
Thanks
I think all you need is vertical-align:top
#instructions {
background-color: bisque;
padding: 20px;
}
#picture {
background-color: aliceblue;
padding: 30px;
border: 10px solid #000;
display: table-cell;
}
#content {
display: table-cell;
padding: 25px;
font-size: 16px;
vertical-align: top;
}
<section id="instructions">
<h1>Learning Altberta's Geography</h1>
<p>bla bla bla bla</p>
</section>
<section id="picture">
<img src="http://lorempixel.com/output/city-h-c-100-200-6.jpg" />
</section>
<section id="content">
<h1> Lake....</h1>
</section>
add
vertical-align:top;
to
#content
That's right add vertical-align:top;
Related
Hello everyone I am pretty new to HTML and CSS is there any way for me to make the background of this footer be over the whole footer and not that one bit. I tried a few things but is will over lap the contact forum for a small part but it is pretty annoying that I cant find out how to solve this problem
.footer,
.push {
height: 50px;
}
.footer {
background: #000f14 !important;
padding: 20px !important;
text-align: center !important;
position: absolute !important;
bottom: 0 !important;
margin-top: 50px;
width: 100% !important;
}
.column {
display: inline-block;
width: 25%;
vertical-align: top;
text-align: left;
margin: 0 2.5%;
margin-top: 15px;
background: #000f14;
}
.column h3 {
margin-top: 0;
margin-bottom: 10px;
background: #000f14;
font-size: 25px;
}
.column ul {
list-style: none;
margin: 0;
padding: 0;
background: #000f14;
}
.column ul li {
padding: 5px 0;
background: #000f14;
font-size: 15px;
}
.column p {
margin: 0;
background: #000f14;
font-size: 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="footer-placeholder">
<div class="footer">
<div class="column">
<h3>Contact Information</h3>
<ul>
<li>1234 Example Street</li>
<li>Example City, XX 12345</li>
<li>Phone: (555) 555-5555</li>
<li>Email: info#example.com</li>
</ul>
</div>
<div class="column">
<h3>Services</h3>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Marketing</li>
<li>SEO</li>
</ul>
</div>
<div class="column">
<h3>Trademark</h3>
<p>© 2023 AquaTech. All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>
.footer,
.push {
height: 100%;
}
With this basically you tell your element with footer class that take the full height of its child elements.
You need to add the height in the class
.footer { height: auto }
And to make the content of footer visible add color in the class
.column{color: white}
The final look of your both CSS classes will be as below;
.footer { background: #000f14 !important; padding: 20px !important; text-align: center !important; position: absolute !important; bottom: 0 !important; margin-top: 50px; width: 100% !important;height:auto; }
.column { display: inline-block; width: 25%; vertical-align: top; text-align: left; margin: 0 2.5%; margin-top: 15px; background: #000f14; color:white;}
Besides, you can also have a look at the link below to see the solution visually: TestWise Replay| fixed the footer height
Simply add height: auto; to the .footer CSS selector.
Improvements suggestions:
Use the <footer> HTML element instead of <div class='footer'> for semantic markup.
Learn flexbox to layout the columns using display: flex.
Read about better ways to place the footer at the bottom
I've created a grid, and it's just supposed to be 4 rows at the moment, so to see the rows I added a border to them, however I'm only seeing a line, not borders of different divs in my grid.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html{
overflow-x: hidden;
font-family: "Poppins", sans-serif;
}
html{
background-color: black;
}
.webgl{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
nav{
color: white;
z-index: 2;
position: relative;
padding: 4rem 4rem;
display: flex;
justify-content: space-between;
}
nav a{
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul{
list-style: none;
display: flex;
gap: 2rem;
}
main {
flex-grow: 1;
}
main > article {
display: grid;
height: 100%;
}
main > article > .article-section{
height: 100%;
border: 0.1px solid white;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Appearances</title>
</head>
<body>
<div class="header">
<nav>
B-1 Series Battle Droid - Appearances
<ul>
<li>Creation</li>
<li>Appearances</li>
</ul>
</nav>
</div>
<main>
<article>
<div class="article-section" id="section1"></div>
<div class="article-section" id="section2"></div>
<div class="article-section" id="section3"></div>
<div class="article-section" id="section4"></div>
<div class="article-section" id="section5"></div>
<div class="article-section" id="section6"></div>
</article>
</main>
</body>
</html>
When you run the code, you can see a white line at the top but that's it. I'm not sure why this is happening, but it's possible it has something to do with the article? I'm fairly new to HTML and CSS so I'm not sure.
Any ideas?
The problem you described is caused by your main not having a set height. Give it a height: 100vh to fix this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html{
overflow-x: hidden;
font-family: "Poppins", sans-serif;
}
html{
background-color: black;
}
.webgl{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
nav{
color: white;
z-index: 2;
position: relative;
padding: 4rem 4rem;
display: flex;
justify-content: space-between;
}
nav a{
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul{
list-style: none;
display: flex;
gap: 2rem;
}
main {
flex-grow: 1;
height: 100vh;
}
main > article {
display: grid;
height: 100%;
}
main > article > .article-section{
height: 100%;
border: 0.1px solid white;
background-color: white;
}
main > article> .article-section:nth-child(odd) {
background-color: grey;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Appearances</title>
</head>
<body>
<div class="header">
<nav>
B-1 Series Battle Droid - Appearances
<ul>
<li>Creation</li>
<li>Appearances</li>
</ul>
</nav>
</div>
<main>
<article>
<div class="article-section" id="section1"></div>
<div class="article-section" id="section2"></div>
<div class="article-section" id="section3"></div>
<div class="article-section" id="section4"></div>
<div class="article-section" id="section5"></div>
<div class="article-section" id="section6"></div>
</article>
</main>
</body>
</html>
Because the row blocks are empty, and at the same time do not have a given min-height. Shows only the borders, and the height of the content is 0. Accordingly, they are superimposed on each other, and it looks like a white line.
I am learning (teaching myself) HTML and CSS, I came with the idea of creating the following, a little complex, page layout using only HTML and CSS FlexBox:
Here is what I get:
My CSS and HTML code snippet files:
/*
I gave background-color to the left-menu and right-text
to show their position in the flex container.
*/
* {
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
border: 2px solid blue;
}
#h1-title {
font-family: 'Tangerine', serif;
font-size: 3em;
/* 48px */
}
nav>#div-left {
background-color: white;
color: blue;
justify-content: center;
}
nav>#div-left>a {
text-decoration: none;
display: block;
padding: 0px 15px;
margin: 10px auto;
}
nav>#div-left>a:hover {
background-color: yellow;
color: blue;
}
main {
background-color: silver;
}
.row-display-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.container-border {
border: 2px solid gray;
}
#vertical-menu {
padding: 0px 20px;
align-content: flex-start;
}
.left-menu {
height: 300px;
justify-content: center;
align-items: flex-start;
}
.column-right,
.column-center {
height: 300px;
padding: 0px 10px;
}
#article-right>#div-right,
#article-center>#div-center {
background-color: white;
padding: 10px;
width: 100;
margin: 0 20px;
}
.width-10-p {
width: 10%;
}
.width-37-50-p {
width: 37.5%;
}
.width-100-p {
width: 100%;
}
.width-50-p {
width: 50%;
}
.height-50px {
height: 50px;
}
.height-50-p {
height: 50%;
}
footer {
text-align: center;
font-family: 'Sofia';
font-size: 22px;
border: 2px solid blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Binyamin (Benny) Regev">
<meta name="course" content="Web App Dev - July 2019">
<title>M8E4-Extra</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 id="h1-title">Making A Beautiful Page</h1>
</header>
<main class="row-display-flex align-items-center container-border">
<article class="row-display-flex align-items-center width-10-p left-menu container-border">
<nav id="vertical-menu">
<div id="div-left">
☰
File
Edit
View
Tools
Window
Help
</div>
</nav>
</article>
<article id="article-center" class="row-display-flex align-items-center column-center width-37-50-p container-border">
<div id="div-center">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</article>
<article id="article-right" class="row-display-flex align-items-center column-right width-37-50-p container-border">
<div id="div-right">
<!-- Row 1 Column-3 (Right), Row 1 (Top) 100% of 37.5% -->
<div class="row-display-flex align-items-center container-border height-50-p">
<p class="width-100-p">
Parent: Row-1_Column-Right, First-Row (top-row)
</p>
</div>
<!-- Row 1 Column-3 (Right), Row 2 (Bottom) 2 columns each 50% of parent width -->
<div class="row-display-flex align-items-center height-50-p">
<div class="row1-col3-row2 width-50-p container-border">
Parent: Row-1_Column-Right, This: 2nd-Row_left-column
</div>
<div class="row1-col3-row2 width-50-p container-border">
Parent: Row-1_Column-Right, This: 2nd-Row_right-column
</div>
</div>
</div>
</article>
</main>
<footer>
<h3>Footer Text</h3>
</footer>
</body>
</html>
header and footer are not a problem, took some fonts from Google©.
I created a ROW flex-container with 3 columns. The Left column I used for nav element, a vertical menu. The center column is used to display whatever text I will have to display. In the right column, I created 2 rows flexboxes: The top row's width is 100% of its parent and the bottom row is divided into 2 columns and here is my problem: I want the 2 rows to stretch to the entire area of the right column.
I would appreciate assistance in stretching the flex-items of the right column of the main row to match the page design.
Just tell those 2 columns to grow:
#article-right, #article-center {
flex-grow: 1;
}
/*
I gave background-color to the left-menu and right-text
to show their position in the flex container.
*/
* {
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
border: 2px solid blue;
}
#h1-title {
font-family: 'Tangerine', serif;
font-size: 3em;
/* 48px */
}
nav>#div-left {
background-color: white;
color: blue;
justify-content: center;
}
nav>#div-left>a {
text-decoration: none;
display: block;
padding: 0px 15px;
margin: 10px auto;
}
nav>#div-left>a:hover {
background-color: yellow;
color: blue;
}
main {
background-color: silver;
}
.row-display-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.container-border {
border: 2px solid gray;
}
#vertical-menu {
padding: 0px 20px;
align-content: flex-start;
}
.left-menu {
height: 300px;
justify-content: center;
align-items: flex-start;
}
.column-right,
.column-center {
height: 300px;
padding: 0px 10px;
}
#article-right>#div-right,
#article-center>#div-center {
background-color: white;
padding: 10px;
width: 100;
margin: 0 20px;
}
.width-10-p {
width: 10%;
}
.width-37-50-p {
width: 37.5%;
}
.width-100-p {
width: 100%;
}
.width-50-p {
width: 50%;
}
.height-50px {
height: 50px;
}
.height-50-p {
height: 50%;
}
footer {
text-align: center;
font-family: 'Sofia';
font-size: 22px;
border: 2px solid blue;
}
#article-right, #article-center {
flex-grow: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Binyamin (Benny) Regev">
<meta name="course" content="Web App Dev - July 2019">
<title>M8E4-Extra</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 id="h1-title">Making A Beautiful Page</h1>
</header>
<main class="row-display-flex align-items-center container-border">
<article class="row-display-flex align-items-center width-10-p left-menu container-border">
<nav id="vertical-menu">
<div id="div-left">
☰
File
Edit
View
Tools
Window
Help
</div>
</nav>
</article>
<article id="article-center" class="row-display-flex align-items-center column-center width-37-50-p container-border">
<div id="div-center">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</article>
<article id="article-right" class="row-display-flex align-items-center column-right width-37-50-p container-border">
<div id="div-right">
<!-- Row 1 Column-3 (Right), Row 1 (Top) 100% of 37.5% -->
<div class="row-display-flex align-items-center container-border height-50-p">
<p class="width-100-p">
Parent: Row-1_Column-Right, First-Row (top-row)
</p>
</div>
<!-- Row 1 Column-3 (Right), Row 2 (Bottom) 2 columns each 50% of parent width -->
<div class="row-display-flex align-items-center height-50-p">
<div class="row1-col3-row2 width-50-p container-border">
Parent: Row-1_Column-Right, This: 2nd-Row_left-column
</div>
<div class="row1-col3-row2 width-50-p container-border">
Parent: Row-1_Column-Right, This: 2nd-Row_right-column
</div>
</div>
</div>
</article>
</main>
<footer>
<h3>Footer Text</h3>
</footer>
</body>
</html>
Thank you BugsArePeopleToo for the tip but, it wasn't the solution. It was my fault that my code didn't work as I had mistakes in the CSS. Now it works as shown in the screenshot:
Here's the corrected code snippet:
/*
I gave background-color to the left-menu and right-text
to show their position in the flex container.
*/
* {
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
border: 2px solid blue;
}
#h1-title {
font-family: 'Tangerine', serif;
font-size: 3em; /* 48px */
}
nav>#div-left {
background-color: white;
color: blue;
justify-content: center;
}
nav>#div-left>a {
text-decoration: none;
display: block;
padding: 0px 15px;
margin: 10px auto;
}
nav>#div-left>a:hover {
background-color: yellow;
color: blue;
}
main {
background-color: silver;
}
.row-display-flex {
display: flex;
}
.container-border {
border: 2px solid gray;
}
#vertical-menu {
padding: 0px 20px;
align-content: flex-start;
}
.left-menu {
height: 300px;
justify-content: center;
align-items: flex-start;
}
.column-right, .column-center {
height: 300px;
}
.row1-col3-row {
align-items: flex-start;
}
#article-center>#div-center, #article-right>#div-right {
background-color: white;
width: 100;
}
.width-10-p {
width: 10%;
}
.width-37-50-p {
width: 37.5%;
}
.width-100-p {
width: 100%;
}
.height-50-p {
height: 50%;
}
footer {
text-align: center;
font-family: 'Sofia';font-size: 22px;
border: 2px solid blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Binyamin (Benny) Regev">
<meta name="course" content="Web App Dev - July 2019">
<title>M8E4-Extra</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 id="h1-title">Making A Beautiful Page</h1>
</header>
<main class="row-display-flex align-items-center container-border">
<article class="row-display-flex align-items-center width-10-p left-menu container-border">
<nav id="vertical-menu">
<div id="div-left">
☰
File
Edit
View
Tools
Window
Help
</div>
</nav>
</article>
<article id="article-center"
class="row-display-flex align-items-center column-center width-37-50-p container-border">
<div id="div-center">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</article>
<article id="article-right"
class="row-display-flex column-right width-37-50-p container-border">
<div id="div-right">
<!-- Row 1 Column-3 (Right), Row 1 (Top) 100% of 37.5% -->
<article class="row-display-flex container-border height-50-p">
<p class="width-100-p">
Parent: Row-1_Column-Right, First-Row (top-row)
</p>
</article>
<!-- Row 1 Column-3 (Right), Row 2 (Bottom) 2 columns each 50% of parent width -->
<article class="row-display-flex row-1-col-3-row height-50-p">
<div class="row1-col3-row container-border">
Parent: Row-1_Column-Right,
This: 2nd-Row_left-column
</div>
<div class="row1-col3-row container-border">
Parent: Row-1_Column-Right,
This: 2nd-Row_right-column
</div>
</article>
</div>
</article>
</main>
<footer>
<h3>Footer Text</h3>
</footer>
</body>
</html>
main p, main h2, main h3, main h4 {
width: 268px;
height: auto;
margin: 0 auto;
text-align: center;
margin-top: 10px;
}
.center {
margin: 0 auto;
width: 268px;
height: 100px;
text-align: center;
}
.orange-button {
padding: 10px;
border: 1px solid black;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<h4>
Zapraszam!
</h4>
<div class="center">
<a class="orange-button" href="#">
Przejdź do strony głównej!
</a>
</div>
</main>
</body>
</html>
As you can see in this snippet padding of button goes beyond div .center
Plus his border goes onto above h4 element.
I don't know exactly what happened here and what is going on.
This border around button shouldn't go beyond .center div and especially shouldn't go onto h4
Add display: inline-block in your orange-button css
main p, main h2, main h3, main h4 {
width: 268px;
height: auto;
margin: 0 auto;
text-align: center;
margin-top: 10px;
}
.center {
margin: 0 auto;
width: 268px;
height: 100px;
text-align: center;
}
.orange-button {
padding: 10px;
border: 1px solid black;
display: inline-block;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<h4> Zapraszam!</h4>
<div class="center">
<a class="orange-button" href="#">
Przejdź do strony głównej!
</a>
</div>
</main>
</body>
</html>
Only one change in your css,
Please add just display: block; css in your .orange-button class. Nothing else you need to do.
Thanks.
main p, main h2, main h3, main h4 {
text-align: center;
}
.center {
text-align: center;
}
.orange-button {
padding: 10px;
border: 1px solid black;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<h4>
Zapraszam!
</h4>
<div class="center">
<a class="orange-button" href="#">
Przejdź do strony głównej!
</a>
</div>
</main>
</body>
</html>
Is this what you want?
I've got a footer that works fine, but when the size of content in the page is shorter than the page size, the footer is rendered below the content not in the bottom of the page, here is an image:
Here is my code (jsbin snippet):
.footer {
position: absolute;
width: 100%;
margin-bottom: 0;
background-color: #2D2D2D;
height: 100px;
text-align: center;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
</head>
<body ng-app="AngularJSApp">
<div class="contentBody">
<div id="contenido">
#RenderBody()
</div>
</div>
<div class="footer">
<p class="copyright">Copyright © 2015 Diego Unanue — 3xM Web Design</p>
</div>
</body>
</html>
What can I do to fix this problem, and always keep the footer in the bottom of the page?
you can use this sticky footer:
html,
body {
height: 100%;
margin: 0
}
.contentBody {
min-height: 100%;
/* equal to footer height */
margin-bottom: -100px
}
.contentBody:after {
content: "";
display: block
}
.footer,
.contentBody:after {
height: 100px
}
.footer {
width: 100%;
background-color: #2D2D2D;
text-align: center;
color: white
}
<body ng-app="AngularJSApp">
<div class="contentBody">
<div id="contenido">
#RenderBody()
</div>
</div>
<div class="footer">
<p class="copyright">Copyright © 2015 Diego Unanue — 3xM Web Design
</p>
</div>
</body>
Add this to your css
html, body {
min-height: 100%;
}
and on .footer change
margin-bottom: 0;
to
bottom: 0;
you can use
html,body {
position:absolute;
bottom: 0px;
}