Can we utilize CSS/HTML to visually move a full width element that is positioned below another one so that it appears above without altering the markup order?
<div id="first">first</div>
<div id="second">second</div>
#first {…}
#second {…}
Expected outcome:
second first
If you want to achieve this, consider utilizing CSS Flexible Boxes. Focus on using the Flexbox order property for proper alignment.
To demonstrate, I have included width and background-color attributes to enhance clarity. Be mindful that browser compatibility with CSS flexible boxes is limited to contemporary browsers like IE 10+, Chrome 21+, Firefox 20+. It might encounter issues on older mobile browsers.
.container {
display: flex;
flex-direction: column;
}
#first {
order: 2;
width: 10em;
margin-top: 1em;
background-color: orange;
}
#second {
order: 1;
width: 10em;
background-color: yellow;
}<div class='container'>
<div id=first>
first
</div>
<div id=second>
second
</div>
</div>Only if the height of the second element is known precisely:
#first {
margin-top: 20px;
}
#second {
top: 0;
position: absolute;
}
Check out this code on Js Fiddle
This is an example of how you can position elements using CSS:
#first { position:relative; top:18px}
#second {position:relative; bottom:18px}
One way to handle this issue is by utilizing position: absolute. However, a drawback of this approach is that the parent element will not expand in height as the child container's (first element) height increases. (To resolve this, JavaScript can be used)
CSS
.container {
border: 1px solid green;
display: inline-block;
position: relative;
}
#first {
position: absolute;
top: 100%;
}
This may be an old question, but I found a simple solution that worked for me.
Simply wrap the two columns in a div and apply the following styles to the div:
display: flex;
flex-direction: column-reverse;
For example:
.container {
display: flex;
flex-direction: column-reverse;
}
<div class="container">
<div>first</div>
<div>second</div>
</div>
Here is an interesting HTML structure that includes a list and input field: <li> <span>19</span> </li> <li> <span>20</span> </li> ...
I'm working on an HTML file, which is basically a webpage. My goal is to create a functionality where clicking a button will dynamically replace the content of the page with another HTML file, complete with its own CSS, JavaScript functions, and other ...
This image perfectly encapsulates the essence of my code and project structure. I am encountering an issue where I cannot return the home.html file located in the static folder. I have tried specifying it as 'home' or 'home.html', but n ...
Looking for a solution to display unique footers in Rails? For instance, displaying one footer on the homepage and another footer on the rest of the site. Has anyone successfully implemented this before? I was considering using an if statement based on th ...
I have a container with a height of 100vh. Inside it, there is an image and some text. The text's height may vary based on the screen size and content length. I want the text to occupy its required space while the image fills up the remaining availabl ...
I am facing an issue with the color of my component changing based on the value of the prop 'level'. Despite using states to set the backgroundColor, all components end up having the same color due to the state being altered for every comment. I ...
Looking for a solution to get the keypress action working properly? I have a chat feature where I need to send messages. Here is what I have in the Form-tag (JSP based): function SendMessage() { if (event.keyCode===13) { ale ...
My goal is to automate tasks at my workplace, but I am facing some challenges. Due to the lack of admin access on my work Intercom App, I have resorted to using Selenium. I need to input "Hey" into the chat box on Intercom and send the message successfull ...
Creating a tooltip in a weather chart, I want to display an image of the sky condition. Below is the HTML code: <div id="tooltip"> <table class="table table-condensed"> <tr><th>Time (local)</th><th data-text="d ...
I am having trouble implementing Vue Draggable to move items between lists within a component setup. The issue I'm facing is that the items can be moved within a list, but not from one list to another. The structure involves a Board component that ho ...
As a newcomer to the world of web design, I have taken on what seems like a challenging task for me: creating a webpage that can send a query string to the German Railway website (bahn.de) with the parameters I input. My question now is whether there is a ...
My goal is to monitor a page for updates while maintaining the same session and cookies, without sending a completely new request. How can I determine if there are HTML updates within my current request? The page will redirect but keep the same URL. This ...
I'm attempting to add thin borders to a div. My CSS code is as follows: border: solid; border-width: 1px; However, the resulting borders appear unevenly thin in my browser. The borders on the left and bottom seem thicker than those on the right and ...
I am trying to achieve the following structure: folder1 index folder2 page to load Can I dynamically load the 'page to load' in a div within the 'index' page using DIV.load()? I have attempted various paths (../folder2/page, ./, ...
In my Ionic app, I have a long text page with 2 buttons that trigger the actions scrollToBottom and scrollToTop. Due to the length of the page, I have set the scroll duration to be 30 seconds. I am facing two issues here: How can I stop the scrolling ...
JavaScript: const buttons = document.getElementsByClassName("togglebtn"); for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { this.classList.toggle("active"); } } html: <md-butt ...
Struggling to make a section of my website responsive and encountering an issue that's proving difficult to solve. The current setup involves 3 rectangular inline-block divs per "row" with a margin-right of 100px in a wrapper, all dynamically added. ...
My goal is to determine the position of an x and y location when a user clicks on an image. This information will be used to add a spot to the image that displays relevant information. The content for the spot will be dynamically loaded from a SQL database ...
I am experiencing an issue with my website. In my "toggle device" toolbar, I selected the responsive option for iPhone 7 Plus, Galaxy 8, and others. While my website looks good on some devices, it does not function as desired when opened on an iPhone (7+/ ...
Today I encountered a puzzling issue on my website with a responsive layout that utilizes @media queries and breakpoints. At one specific breakpoint (or resolution, as I am still learning the terminology), the links in the navigation bar are inexplicably d ...