Is there a way to align text so that it appears in both the bottom right and bottom left corners of the page, functioning as a footer?
For example:
JANUARY (bottom left corner) / 2019 (bottom right corner)
If anyone knows how to achieve this using HTML code, your assistance would be greatly appreciated!
Thanks in advance!
Feel free to take a look at this JSfiddle: website
Currently utilizing flexbox for layout purposes.
.container {
height:200px;
background-color:blue;
display:flex;
align-items:center;
justify-content:space-around;
}<div class="square">
</div>
<div class='container'>
<span>FEBRUARY</span>
<span>2020</span>
</div> Flexbox may not be compatible with IE9 and certain other browsers. Here is an alternative solution:
.wrapper {
height: 300px;
border: 1px solid green;
border-radius: 4px;
position:relative;
}
.wrapper span:first-child {
bottom: 0;
left:0;
position: absolute;
padding: 10px 15px;
}
.wrapper span:last-child {
bottom: 0;
right:0;
position: absolute;
padding: 10px 15px;
}<div class='wrapper'>
<span>JANUARY</span>
<span>2019</span>
</div> If you only need this for a website's header and footer, you can apply CSS directly to the spans.
.span_left {
position: fixed;
bottom: 0;
left: 0;
padding: 10px 15px;
}
.span_right {
position: fixed;
bottom: 0;
right: 0;
padding: 10px 15px;
}<div class='wrapper'>
<span class="span_left">JANUARY</span>
<span class="span_right">2019</span>
</div> If you're looking to incorporate a sticky footer using bootstrap, I have created an example that provides a simple and neat solution. Check out the code snippet below for an easy implementation:
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
Test sticky footer
</div>
</div>
</div>
<div class="footer">
<div class="container">
<span class="float-left">January</span>
<span class="float-right">2019</span>
</div>
</div>An alternative version using position: absolute (suitable for older browsers).
.footer {
height: 200px;
background-color: teal;
position: relative;
}
.footer span {
position: absolute;
bottom: 5px;
}
.footer span:first-child {
left: 5px;
}
.footer span:last-child {
right: 5px;
}
.footer span:last-child a {
font-weight: 600;
color: #FFD500;
}
.footer span:last-child {
right: 5px;
}
.footer span a {
color: white;
text-decoration: none;
}
.footer span a:hover {
color: blue;
}<div class="footer">
<span><a href="https://www.google.com" target="_blank">JANUARY</a></span>
<span><a href="https://www.bing.com" target="_blank">2019</a></span>
</div>Alert: PowerShell has detected that a screen reader may be in use and has disabled PSReadLine for compatibility reasons. To re-enable it, simply run 'Import-Module PSReadLine'. PS C:\Web Development> scss --style expanded "c:\W ...
Trying to figure out the best method for moving game characters in my JavaScript game - should I go with window.webkitRequestAnimationFrame or stick with setInterval? Any advice is appreciated! ...
Attempting to create an H page layout: body { background-color: grey; background-size: 100%; background-repeat: no-repeat; } html, body { height: 100%; margin: 0px; } .a { float: left; width: 25%; height: 100%; border: 1px solid blue ...
Is there a way to ensure that an image fits within a specified area using CSS or other methods? For example, if I have images of various sizes and want them all to fit into a div of 150px by 100px without stretching or distorting them. I just want the imag ...
I am experimenting with the jquery easy paginate plugin on a separate page of my Blogspot. The images are displaying properly, but the pagination and CSS are not showing up. I need to adjust my CSS to make this jQuery pagination work correctly. Can someone ...
Check out this Fiddle example I'm interested in experimenting with different color combinations using a small chart plugin called piety. The documentation demonstrates how to set different colors for a pie chart: $(".bar-colours-1").peity("bar", { ...
https://i.sstatic.net/0qhjT.png Looking at the image provided, I'm doing a comparison of the minimum resizable widths between my website and GitHub's. Is there a way to enforce a minimum width limit on my website similar to GitHub's? I&apo ...
Suppose we have a tag that utilizes a ternary operator to apply alignment: <td :class="alignment ? ('u-' + alignment) : null" > This functions as intended since the pre-defined alignment classes are in place, now if we want to ...
Creating three buttons, each of which hides all content divs and displays a specific one when clicked. For instance, clicking the second button will only show the content from the second div. function toggleContent(id) { var elements = document.getEl ...
Consider the following string: html_string = '<span><span class=\"ip\"></span> Do not stare <span class=\"img\"></span> at the monitor continuously </span>\r\n' I am looking to ...
I am trying to retrieve content from a web page and display it on my own webpage using AJAX. However, I keep encountering an "Access denied" error before the specified page is fetched. It's important to note that the target page does not require any l ...
My code snippets: <article class="featured"> <img src="http://www.placehold.it/300x100/ff0000"> <p> <!--Text--> </p> </article> <article class="sub-featured"> <img src="http://www.placeh ...
I am currently working on creating a modal that will be displayed in the center of the screen with the same width as the main page. However, I am facing an issue where the modal is not perfectly centered. I suspect that this is due to the overflow style ...
I am having trouble separating the content of the bootstrap5 popover from the HTML attributes, unlike other components where it is achievable. var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var ...
I am in need of a script that can dynamically increase and decrease the font size on a website while retaining the user's chosen setting even after they return to the site. I believe utilizing cookies is the way to achieve this functionality. Despite ...
My design conundrum lies within a flexbox structure where I desire specific elements to have varying amounts of spacing, prompting me to experiment with margins. At the top of my box, there is a header that requires some distance between itself and the su ...
I am crafting an HTML5 game without the use of canvas and aiming to maintain a 16:9 aspect ratio within my div. Thanks to javascript, achieving this is straightforward and it functions flawlessly. However, the elements inside the div occasionally appear to ...
Is there a way to prevent the model popup from closing when the space or enter key is pressed on the keyboard? I have already tried using data-backdrop="static" data-keyboard="false" but it still closes. Additionally, I have ensured that the form tag is no ...
Below is an example of HTML script: <h1> This is heading one </h1> <p> This is paragraph. </p> I would appreciate any recommendations on how to add <html></html> tags to the above script using C#. ...
Having trouble with the .open not working in Bootstrap 4.3 after adding the btn-group class to open the dropdown... I am looking for a way to load the dropdown without using JavaScript from Bootstrap. This is the directive I am trying to use: @Host ...