Here is the code snippet I am working with:
<div id="container">
<div id="1"> div 1</div>
<div id="2"> div 2</div>
</div>
I am looking to rearrange the order so that div 1 is positioned at the top and div 2 is placed at the bottom of container, irrespective of the height of container. Any suggestions on how I can achieve this?
To achieve such layout results, one can utilize the power of flex properties. Regardless of the height of the container, the two divs will always be positioned at the top and bottom.
#container {
display: flex;
justify-content:space-between;
flex-direction:column;
background-color: lightgrey;
}
#id{
background-color: cornflowerblue;
width: 100px;
margin: 10px;
}
Adjust the position of the container to relative, and set div 1 and 2 to absolute positioning. Ensure div 1 is at the top with a value of 0 and div 2 is at the bottom with a value of 0 (It's recommended to avoid using numerical IDs for better CSS compatibility):
Check out this jsFiddle example
#container {
position: relative;
height: 100px;
width: 100px;
border: 1px solid #999;
}
#div1, #div2 {
position: absolute;
}
#div1 {
top: 0;
}
#div2 {
bottom: 0;
}
Feel free to test out the code snippet below:
<div id="wrapper">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
</div>
When it comes to styling, I personally lean towards using inline css most of the time, especially when aligning inside divs. Here's a quick example in react jsx:
<div style={{ display: "flex", justifyContent:"flex-end", flexDirection: "column"}}>
<div style={{ marginBottom: 3, display: "flex", justifyContent:"flex-end", flexDirection: "row" }}>{content.sender}</div>
<div>
<Bubble type="text">
<p>{content.text}</p>
</Bubble>
</div>
</div>
After adjusting the navbar height, the overflowing issue was resolved, but I specifically want it to be set at 5rem. Currently, the content of the navbar exceeds the 5rem height and mixes with the main body content, regardless of what modifications I make. ...
I'm currently working on creating a circular frame or canvas for live HTML5 Video. While I am able to round the corners using keyframes radius property, it results in an oval shape rather than a circle. My preference would be to utilize a div object ...
I am currently working on a parent page titled Criatweb, which contains an iframe page. My goal is to modify the display of a specific div within the iframe page only when its title matches Criatweb. I attempted to implement the following script within t ...
Utilizing Awesome Tables (AT), I am extracting data from a Google Sheets document to display on a website. The HTML template in the sheets is used for formatting the data, specifically focusing on the table output with inline CSS styling. Since the templat ...
I recently worked on a project where I encountered a similar situation to the one showcased in this CodePen. Here is the link to the specific CodePen One issue I faced was that the selected items would disappear when performing an invalid search. After i ...
I'm currently working on a code block that resembles the following: <p class="cont"> <a href="otherpage.php" class="link"><img src="test.jpg" alt="" width="100" height="100"/></a> </p> Additionally, I have some CSS sty ...
<div id="container"> <div>HEADER</div> <div>CONTENT</div> <div>FOOTER</div> <div><textarea></textarea></div> </div> <button>activate overlay</button> #cont ...
I'm currently working on a web system aimed at monitoring values from a database, and I have the requirement to trigger a sound alert when a specific range of values is received. Despite trying various examples found online, none of them have been suc ...
Is there a way to make an overlay disappear when clicking anywhere on the screen except for a specific card positioned on top of it? The current setup makes the overlay disappear even when the card is clicked. How can this behavior be corrected? <div ...
<picture> <source media="(min-width: 992px)" srcset="/images/xxxxxxxxxx.jpg"> <source media="(min-width: 768px)" srcset="/images/yyyyyyyyyy.jpg"> <img src="/images/zzzzzzzzzz.jpg"> </picture> What is the best way ...
I created this accordion menu using only html and css, but the buttons are built with the :target id. Is there a way to prevent the automatic scrolling when any button is clicked without using javascript? It currently moves to the anchor #id. I've se ...
The problem arises when attempting to navigate with the navbar item, as it fails to redirect to the intended page and provides no feedback. However, upon removing the bootstrap.bundle.min.js, the redirect feature operates as expected. Nonetheless, the coll ...
One question that often arises is how to change the content of a div element on a different page within a website. While it is common to use Ajax to dynamically update div content within the same page by fetching data from an external .html file, the proce ...
I have a sticky navigation bar with the tab "categories" that reveals the dropdown menu "categoriesDropdown" when hovered over. I want the dropdown menu to span the width of the screen and be centered on it. I also need the dropdown menu to stick to ...
After experimenting with this example to facilitate data transfer between two different controllers in AngularJs, I am encountering an issue. While I can modify a variable of the service from the second controller and display it in its view, the change doe ...
I am trying to update the languages within my div based on the country I select. Here's what I have attempted so far, but it doesn't seem to be functioning correctly. I have included a link to my fiddle in the comments since I can't paste i ...
I am currently working on a webpage and attempting to incorporate JQuery into it for the first time. However, I seem to be encountering some issues that I believe might have simple solutions. Background Information My JQuery code only contains one event l ...
I have been experimenting with implementing custom sorting in a mat-table using API response data. Unfortunately, I have not been able to achieve the desired result. Take a look at my Stackblitz Demo https://i.sstatic.net/UzK3p.png I attempted to implem ...
I have recently encountered an unexpected issue with my full-width video header that worked perfectly on multiple pages before. Strangely, a thin black line has appeared around the bottom and right side of the div (.header) containing the video, even thoug ...
I'm a beginner in the world of HTML/CSS. When I save my style.css file, it shows up as a Notepad+ settings file and doesn't seem to work with my HTML. Can anyone advise me on what steps I should take? ...