How to make text in HTML and CSS stay at the bottom of a div?

Question

How to make text in HTML and CSS stay at the bottom of a div?

I am in the process of creating a website dedicated to my "Starcraft II" clan. My goal is to have the navigation bar display the text "ALLOYE" and remain fixed at the bottom of the screen. I attempted to achieve this using the following code:

vertical-align: text-bottom;

However, I noticed that the text appears to be positioned about 10 pixels above the bottom. Could this be due to any hidden borders or other factors? Below is the complete HTML markup for my project:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
  <body>
     <div class="nav">
        <div class="title">
           <strong>ALLOYE</strong>
        </div>
     </div>
  </body>
</html>

Additionally, here is the CSS code in use:

body {
  margin: 0; 
  padding: 0; 
  color: #fff;
  font-family: "Segoe UI", Arial, Sans-Serif;
}
.nav {
  position: absolute;
  width: 100%;
  height: 7%;
  background: -webkit-linear-gradient(#FFB441, #FF9A00);
  background: -o-linear-gradient(#FFB441, #FF9A00);
  background: -moz-linear-gradient(#FFB441, #FF9A00);
  background: linear-gradient(#FFB441, #FF9A00);
}
.title {
  position: relative;
  vertical-align:text-bottom;
  font-size: 65px;
}

html css

Answer 1

Answer №1

By applying a temporary border to both classes, you will gain insight into the situation.

If you then shift the 7% height to the .title class instead, observe the changes that occur.

Take the following steps to further analyze the effects:

Adjust your browser window to very short heights.
View the webpage in various browsers (IE, Chrome, Firefox, etc).
Check how it appears on your mobile phone.
Use the F12 key in your browser to experiment and troubleshoot.

Wishing you success with this task.

Answer 2

By applying a temporary border to both classes, you will gain insight into the situation.

If you then shift the 7% height to the .title class instead, observe the changes that occur.

Take the following steps to further analyze the effects:

Adjust your browser window to very short heights.
View the webpage in various browsers (IE, Chrome, Firefox, etc).
Check how it appears on your mobile phone.
Use the F12 key in your browser to experiment and troubleshoot.

Wishing you success with this task.

Answer 3

Answer №2

The issue with the overlapping elements is most likely caused by the height of the .nav being set to a percentage value (7%). To resolve this, you can change the height to a fixed pixel value instead.

You can implement something like the following code snippet:

.nav {
  position: absolute;
  width: 100%;
  height: 15px;
  background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}

Answer 4

The issue with the overlapping elements is most likely caused by the height of the .nav being set to a percentage value (7%). To resolve this, you can change the height to a fixed pixel value instead.

You can implement something like the following code snippet:

.nav {
  position: absolute;
  width: 100%;
  height: 15px;
  background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}

Answer 5

Answer №3

Here is an example of how you could achieve the desired effect:

.menu{
  position: relative;
  width: 100%;
  height: 80px;
  background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
.header {
  position: absolute;        
  font-size: 65px; /* Adjusting font size for whitespace */
  bottom: -15px; /* Correcting for font whitespace. Adjust as needed*/
}

In addition to this, it would be wise to follow Ruskin's advice and set a fixed height for your navigation bar.

Answer 6

Here is an example of how you could achieve the desired effect:

.menu{
  position: relative;
  width: 100%;
  height: 80px;
  background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
.header {
  position: absolute;        
  font-size: 65px; /* Adjusting font size for whitespace */
  bottom: -15px; /* Correcting for font whitespace. Adjust as needed*/
}

In addition to this, it would be wise to follow Ruskin's advice and set a fixed height for your navigation bar.

Answer 7

Answer №4

Adjust the CSS by removing height: 7%; from .nav and adding it to .title:
(Revised CSS):

body {
  margin: 0; 
  padding: 0;
  color: #fff;
  font-family: "Segoe UI",Arial,Sans-Serif;
}
.nav {
  position: absolute;
  width: 100%;
  background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
.title {
  position: relative;
  vertical-align:text-bottom;
  font-size: 65px;
  height: 7%;
}

Access the updated layout on: http://jsfiddle.net/Wae6n/3/

Answer 8

Adjust the CSS by removing height: 7%; from .nav and adding it to .title:
(Revised CSS):

body {
  margin: 0; 
  padding: 0;
  color: #fff;
  font-family: "Segoe UI",Arial,Sans-Serif;
}
.nav {
  position: absolute;
  width: 100%;
  background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
.title {
  position: relative;
  vertical-align:text-bottom;
  font-size: 65px;
  height: 7%;
}

Access the updated layout on: http://jsfiddle.net/Wae6n/3/

Answer 9

Answer №5

To implement absolute positioning, make use of the bottom CSS property in the designated element (in this instance, it's <code>.nav</code>). Specify the value of the bottom property as 0%. Your CSS code should resemble the following:

.nav {
  position: absolute;
  bottom: 0px;
}

Answer 10

To implement absolute positioning, make use of the bottom CSS property in the designated element (in this instance, it's <code>.nav</code>). Specify the value of the bottom property as 0%. Your CSS code should resemble the following:

.nav {
  position: absolute;
  bottom: 0px;
}

Answer 11

Answer №6

To start, it seems like incorporating a reset may be necessary. I noticed that there wasn't any spacing in my jsFiddle when I tested your code without making any adjustments (http://jsfiddle.net/R6dTU/).

My suggestion would be to take a different approach here. I would recommend positioning the title in this manner:

.title {
  position: absolute;
  bottom: 0;
}

In addition, using percentage heights without setting a min-height could lead to text getting cut off on some screens.

It's important to note that vertical-align: text-bottom; aligns the text to the bottom of descenders such as the tails on lowercase p's and q's. Therefore, achieving the desired effect may require using position:absolute instead.

As mentioned by @ANeves, while using a reset may not be considered the best practice solution, it could provide a quick fix. The ideal solution would involve:

Using a suitable tag for the header text (consider using h1 instead of a div)
Defining margins, padding, and line-height for this tag to ensure consistency across different browsers (which is typically addressed by using a reset)

Answer 12

To start, it seems like incorporating a reset may be necessary. I noticed that there wasn't any spacing in my jsFiddle when I tested your code without making any adjustments (http://jsfiddle.net/R6dTU/).

My suggestion would be to take a different approach here. I would recommend positioning the title in this manner:

.title {
  position: absolute;
  bottom: 0;
}

In addition, using percentage heights without setting a min-height could lead to text getting cut off on some screens.

It's important to note that vertical-align: text-bottom; aligns the text to the bottom of descenders such as the tails on lowercase p's and q's. Therefore, achieving the desired effect may require using position:absolute instead.

As mentioned by @ANeves, while using a reset may not be considered the best practice solution, it could provide a quick fix. The ideal solution would involve:

Using a suitable tag for the header text (consider using h1 instead of a div)
Defining margins, padding, and line-height for this tag to ensure consistency across different browsers (which is typically addressed by using a reset)

How to make text in HTML and CSS stay at the bottom of a div?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

problem with the clientHeight attribute in window event handlers

Convert JSON data into an HTML table using JavaScript without displaying the final result

What is the process of integrating an HTML web component with an HTML file? Can I use innerHTML = foo("myfile.html") to achieve

Parsing of CSS and Javascript is disabled within iframes

What measures can be taken to ensure that the input checkbox is not toggled by accidentally pressing

What measures can I take to ensure that users cannot tamper with the PayPal code?

Create a Bootstrap jumbotron that is centered and only half of the width

Which is better: Utilizing Ajax page echo or background Ajax/direct HTML manipulation?

Is there a way to eliminate the gap beneath each row of my Tic-Tac-Toe grid in Next.js with CSS styling?

Highlight react-bootstrap NavItems with a underline on scroll in React

Pictures do not adhere to the maximum width set on their parent elements

What is the process for executing Selenium IDE scripts in Selenium RC?

Facing a selection list issue on a web application built with Flask and Vue.js

Is a single f.select impacting another f.select in the same form? (undesired)

Navigating a dynamic table by looping through its generated tr elements

Leveraging CSS to automatically number nested sections

Using Jquery to insert content into HTML using the .html() method is not possible

Creating Dynamic Videos with PHP and HTML

Having trouble with the clear button for text input in Javascript when using Bootstrap and adding custom CSS. Any suggestions on how to fix

Modify the navbar background color in bootstrap-vuejs