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/
I am trying to create a zoom effect on a background image without affecting the text overlaying it. Here is the CSS code: .page1-box { width: 1200px; height:800px; overflow:hidden; } .page1 { width: 100%; height: 100%; background: ...
In my experience, I have been working with C#, HTML coding using VS2010 and MVC. Utilizing VS2010 has proven to be an invaluable tool for me in this process. Currently, I find myself needing to create some straightforward static web pages. I am wondering ...
I am currently working on converting these JavaScript functions into PHP in order to display the correct results. I need guidance on how to use PHP to multiply the values of the NumA and NumB select options, and then show the discount in the discount input ...
If you're looking for the final code, it can be found here: http://jsfiddle.net/asaxdq6p/6/ I am attempting to create an effect similar to this image: To achieve this, I am using the Equal Height Columns with Cross-Browser CSS trick as described in ...
I have a header element that I want to remain fixed while scrolling. The scrollable area should be positioned directly after the fixed header, without using position: absolute and removing it from the document flow. To better illustrate the issue, I' ...
I am trying to implement a dynamic tab using Bootstrap where clicking on a tab will display a thicker black underline, like in this image: https://i.stack.imgur.com/h48GB.png To achieve the black line effect, I have added the following code: .nav-tabs.n ...
I'm trying to format a form according to my UI/UX specifications, where there is a parent label and two sub-labels. Can this be achieved using Bootstrap? https://i.stack.imgur.com/J8wJZ.png However, I'm struggling to align the columns and rows ...
I'm struggling to find the correct selector. Let me do my best to explain the situation: I am currently working on a project where I am unable to make changes to the HTML and JavaScript due to dynamic content and other constraints. Within this proj ...
My initial goal was to stack two elements together side-by-side, both taking the full available height. One element has a fixed width of 200px with an image (70px wide) inside, while the other element should only fit one line of text, clipping any overflow ...
I'm attempting to select the Checkout Button. This is what it looks like : https://i.stack.imgur.com/TiMEO.png And here's the HTML snippet for it : <div id="buy-button-next"> <span data-reactroot=""> <div data-cid="buy- ...
My goal is to create a bar with thin bars, but my use of Bootstrap limits my control over sizes. <template> <div class="container-fluid mx-auto"> <div class="row"> <div class="square rounded-pill&qu ...
Struggling to implement a dropdown feature on a vertical navigation using Jquery. The HTML includes a nav section with 1st level list items and nested li's for second level menu items. On clicking the 1st level li, the intention is to toggle SHOW/HID ...
I am attempting to make circles react to my jquery .hover function. Below is the JavaScript code I am using: jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + ...
My concern is related to the HTML tag below: <a href="/partner-team/team" class="button button__style--1">MEHR</a> This is how the CSS appears: a { text-decoration: none; } .button { padding: 0.2rem 4rem; curso ...
I am working on a layout with five select inputs that I want to arrange horizontally within the parent div. However, the current code setup is not achieving the desired layout: <div id="divtable"> <select class="abc"></select> ...
I'm currently in the process of developing a new website, and I'm looking to create a unique design for the main navigation bar on the homepage. Here is the ideal layout that I have in mind: https://i.stack.imgur.com/pc8z4.png While I understan ...
I'm struggling to style a small block of text within its element perfectly. Despite my efforts, there always seems to be unnecessary space in front and below the words. One workaround I found was adjusting the line height to remove the bottom gap, but ...
I'm working on customizing a re-useable table component using vanilla CSS. I have defined six color variables and want users to be able to select one of them to change the table header background color. However, I am unsure how to make this color choi ...
Let's talk about the scenario: https://i.stack.imgur.com/we05U.png In the image, there is a container (displayed as a div) with only one child - a span element. The goal is to introduce a second child that occupies the entire red space depicted in t ...
Starting from scratch here. I've fetched a table from a remote server where odd rows are white and even rows are grey. Some rows have been hidden: $("td").filter(function(){ return $(this).text()=='R1';}).text('Row1'); //white $(" ...