I have been attempting to align a div at the bottom of its parent div without success. I tried the approach outlined in the following code snippet:
Initially, I believed that setting the CSS properties as shown below would achieve the desired result:
.bottom-menu {
position: absolute;
bottom: 0;
height: 50px;
background-color: yellow;
}
However, as evidenced by the fiddle, it did not work as expected. Can anyone provide guidance on how to accomplish this alignment?
In order for it to work properly, be sure to specify a width. Additionally, apply position: relative to the parent element (the default is static). For an example, refer to this updated code snippet: http://jsfiddle.net/abc123def/2/
Another option is to define the right and left properties as equal to 0, rather than solely setting the width:
HTML:
<div class="box">
<div class="header"></div>
<div class="footer"></div>
</div>CSS:
.box {
height: 300px;
background-color: blue;
position:relative;
}
.header, .footer {
height: 40px;
background-color: pink;
}
.footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
To ensure proper alignment, make sure to include position:relative; in your container CSS and remember to also add width:100%; to your bottom menu.
Check out this example for reference: http://jsfiddle.net/sallysmith/abc123def456/
Give it a shot!!!
.container {
height: 500px;
position: relative;
background-color: blue;}
.top-menu {
height: 60px;
background-color: orange;}
.bottom-menu {
height: 70px;
background-color: orange;
position:absolute;
bottom:0;
width:100%;}
You've got the right code, all that's left is to incorporate a width setting.
.bottom-menu {
position: absolute;
bottom: 0;
height: 50px;
background-color: yellow;
width:100%;
}
In preparation for a project, we are required to utilize the Flickr API in order to display a collection of photos when a specific category is selected. I have successfully set up my categories on the left side of a flexbox container. However, I am struggl ...
Check out my development website. Whenever you click on an image, a photo slider (using photoswipe) pops up. Is there any way to have the image fill the entire viewport? I attempted using height: 100vh, width: auto, but it didn't work. https://i.ssta ...
I have implemented a shadow using a div element to cover some content beneath it. However, I am facing an issue where the div that is under the shadow cannot be interacted with. Is there any solution to this problem? Thank you ...
After creating a code snippet for image tooltips on text hover, I encountered an issue on my website where the bottom of the page expanded to accommodate the images. Is there a simple way to align the cursor at the bottom of the image when scrolling to the ...
Here is my script for a vue component : <template> ... <b-card-group deck v-for="row in formattedClubs"> <b-card v-for="club in row" img-src="http://placehold.it/130?text=No-image" img-alt="Img ...
When utilizing a html file that links to a css file in the same folder or a subfolder, the css is successfully included when running gulp webserver. However, if the css file is located outside of the html-folder, it fails to be included. For instance, if ...
Is there a way to eliminate the space between two columns in my layout? I want to get rid of the highlighted space below. I attempted using text-nowrap, but it didn't achieve the desired result. <link href="https://stackpath.bootstrapcdn.co ...
Is there a way to resolve the problem I'm facing with CSS when accessing the site through the LinkedIn app on iPhone? The issues don't occur on Android. If anyone has a solution, please share. Thank you :) Click Here ...
I am in the process of learning KnockoutJS and I have implemented code for folder navigation in a webmail client. In the view code, there is a comparison being made to check if the reference variable $data and $root.chosenFolderId() point to the same memor ...
I am working on a design where my header-menu is set to fixed position. Within the menu, there are anchor links that scroll to different sections of the same page. However, when users click on these anchor links, the top part of the section is hidden by th ...
In my design, I have a page where scroll bars are not allowed, meaning all content must be visible at once. The image below shows the basic layout of the screen to give you an idea. The layout consists of two blocks - Block 1 and Block 2. Block 1 is expan ...
Recently, I encountered an issue with my table view: https://i.sstatic.net/Fji2F.png Upon clicking the td, it should open the PrettyPhoto Lightbox In the default PrettyPhoto setup, the html trigger looks like this: <a href="images/fullscreen/2.jpg" ...
I am currently enrolled in a web development course and am eager to explore beyond the limitations of the class. I successfully created a jQuery slide show in one div, and now I want to showcase additional features in two other divs, stack them together in ...
I am facing an issue with a CSS grid layout that has sticky left and right columns as shown below: .grid { display: grid; grid-template-columns: repeat(10, 200px); } .grid > div { border: 1px solid black; background-color: white; } .sticky- ...
Having trouble with creating a table and printing the data in a specific structure. The format should be: Title Data Sum The challenge is to ensure that the title does not end up at the bottom of the page, and the sum does not start at the top of the pag ...
Utilizing a jQuery function: $("#btn1").click(function(){ $("p").text("") } Each time the button is clicked, the .text() field fails to load. When I modify the value of .text to a shorter string, it functions correctly. ...
Here is my code snippet: #innerLabels, #innerFields { display: inline-block; width: 200px; height: 200px; border-style: solid; border-width: 1px; vertical-align: top; } .innerLabel { display: table; border-style: solid; border-width: 1 ...
I'm trying to add a navigation arrow on my website that will rotate to point to the top when it reaches the footer. When clicked on, it should scroll back up to the top. The arrow already has a scrolling effect, but I need help figuring out how to m ...
I've designed a basic webpage layout, but I'm facing an issue with responsiveness on mobile and tablet devices. The problem seems to be related to the width: 100% property in my CSS, but I can't seem to pinpoint the exact solution. While tr ...
Recently, I've been attempting to create a Sign-UP form using HTML and CSS in Notepad++, but I'm encountering a problem. Every time I try to test it on Chrome, the page loads incredibly slowly. I'm not sure if it's a configuration error ...