I need help placing a textarea at the bottom of a fixed div:
<div id=msg>
<div id=content>
aaaaaaaannnnnnnnnn<br>
aaaaaaaannnnnnnnnn<br>
aaaaaaaannnnnnnnnn<br>
</div>
<div id=text>
<textarea></textarea>
</div>
</div>
css
#msg{
width:60%;
height:500px;
float:left;
background-color:#fff;
border:1px solid #000;
}
#content{
overflow-y: auto;
}
#text{
bottom:0;
position:fixed;
}
why is "bottom:0" not working as expected? http://jsfiddle.net/mu1tynax/
Make sure to include the following styles in your CSS:
#msg {
position:relative;
}
#text {
position:absolute;
}
If you need a visual representation, I have updated the JSFiddle for you: https://jsfiddle.net/mu1tynax/5/
Credits to: Align Div at bottom on main Div
Your code snippet is missing the crucial styling declaration of position: fixed. Remember, fixed positioning is calculated with respect to the body element, not its relative parent container.
Try adding the position property to your code snippet and watch it function properly.
To properly position your "text" div, you must set its position to absolute and also ensure that the parent div has a relative position set. View this example for reference.
#msg{
width:60%;
height:500px;
float:left;
background-color:#fff;
border:1px solid #000;
overflow-y: auto;
position: relative;
}
#text{
position: absolute;
bottom:0;
}
For more information on positioning elements using absolute values, check out this guide: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
In Bootstrap 4, I have created this form group that you can view in this fiddle: <div class="m-portlet__body"> <div class="form-group m-form__group row"> <label class="col-lg-2 col-form-label"> Email Address ...
We are in the process of creating a web application using Bootstrap Studio for the frontend. One issue we are facing is that when the window is resized, the icons start overlapping each other. Is there a way to make one icon go under the other? Below is t ...
Two buttons are present with the same class but different content <a class="button ordrViewBtn">Sold Out</a> <a class="button ordrViewBtn">Re-Sell</a> I want to change the color of the "Sold Out" button. Is it p ...
Having trouble with a CSS issue that seems simple but I can't find a solution for. I have a main div with a min-height set to a certain value, specified in %. Since there is no outer div, the min-height won't display if it's given in px. I ...
I'm looking to place an image on the left side of each h1 tag. I've been attempting to utilize the before pseudo element for this task. The issue arises when there is no content, causing the before pseudo element to overlap with the h1 tag. How ...
My current code is HTML, CSS, and JS-based. I am looking to design three of these div elements that appear and hide in a loop every 3-5 seconds. After the first run, I want the execution to repeat continuously. How can I modify my code to achieve this func ...
Here are two groups of code along with a straightforward question that most people can answer easily, but still worth asking. Below is the initial piece of code with working CSS implementation: <div class="subTopHolder"> <ul class="language ...
Upon loading the page, my menu is initially set to a width of 0px. When an icon is clicked, a jQuery script smoothly animates the menu's width to fill the entire viewport, displaying all menu items (links) perfectly. The issue I'm facing is that ...
I am currently working on my debut website and I'm facing an issue with the JavaScript file not functioning properly. Is there a chance you can help me troubleshoot this? I'm still in the learning stages of programming. This is the HTML content ...
I have utilized the font family americanpurpose1 for my current project, however, I am encountering issues where special characters such as (), #, etc. are displaying as Smiley faces. I have attempted to use HTML symbol codes to resolve this problem, but u ...
I am looking to apply a CSS selector only on select option child values. I have assigned an id to the selector and now I want to apply different CSS styles to each child (child 1, child 2, etc). <select name="options[81]" id="select_81" class="required ...
I am having trouble changing the font size and color of the a when hovering over p. I have been trying to figure this out for a while now, but I can't seem to get it to work. If anyone has any simple links related to this topic, I would greatly appre ...
I can't understand why the nth-of-type selector needs to be set to 2 instead of 1 for the first sibling of this type in the code. To see the code in action, check out this jsfiddle: https://jsfiddle.net/xj5hvn16/ If anyone could kindly provide an ex ...
My Bootstrap navbar is floating in the center on WordPress and I'm not sure why. Can anyone help me with this issue? Could it be related to WordPress or my stylesheet problems? (Will update my code here if you need) STYLES.CSS .navbar-default { ...
Utilizing the amazing Bootstrap-select jQuery plugin has brought two unexpected default styles to my selectboxes. Despite inserting the necessary CSS and JS files into my website, all select boxes are displaying with these peculiar default settings (withou ...
I'm facing an issue with creating a responsive layout using CSS media queries to adapt to different screen resolutions. Even though I've set up Media Queries for specific resolutions like: /*1280 x 1024*/ /*1280 x 960*/ /*1280 x 800*/ /*1280 x 7 ...
Is there a secure method to disable a div based on a Razor variable in ASP.NET MVC 4.0? I attempted using a CSS class, but it was easily bypassed with developer tools. .disableddiv { pointer-events: none; opacity: 0.4; } Any advice on how to effectively ...
I've been experimenting with creating a hangman game using JavaScript and HTML. However, I'm facing an issue where clicking on a letter doesn't replace the "_" placeholder. var myList=["Computer","Algorithm","Software","Programming","Develop ...
I attempted using height: auto;, however, it did not produce the desired outcome. Do you have any suggestions or alternative solutions? ...
I'm facing an issue where I can't seem to get the image to display as a background. If I just attach the image directly, it shows up without any problems. However, my intention is to make it a background image so that I can overlay text on top of ...