How to reposition a DIV element using CSS only

I'm facing a challenge where I need to relocate a DIV element to the bottom of the body without altering the HTML structure. I tried referring to some existing threads for solutions, like this one on Stack Overflow: Moving a div from bottom to top, using only css, but unfortunately, it doesn't seem to work in my specific case. It seems like there might be something I am missing.

Here's the page I am working on: 

<section>
  <article class="container-fluid">
    <div class="row">...</div>
    <div class="txt">...</div>
    <div class="gallery">...</div>
  </article>
</section>

The specific element I am focusing on is DIV.txt. I want it to appear right after the div.gallery, but I am unable to do so manually since the photo gallery automatically generates itself at the bottom. However, I have the flexibility to modify classes and styles.

If you need more information, feel free to ask.

htmlcssbootstrap-4

Answer №1

Utilizing Flexbox for the task:

.container-fluid {
  display: flex;
  flex-direction: column;
}

.container-fluid * {
  order: 1;
}

.txt {
  order: 2;
}
<section>
  <article class="container-fluid">
    <div class="row">1. Row</div>
    <div class="txt">2. Text</div>
    <div class="gallery">3. Gallery</div>
  </article>
</section>

Answer №2

If you find yourself unable to modify the HTML structure, there is a workaround available.

Although not ideal, I can offer a solution:

position: absolute;

This CSS code should be applied to the div with the class .row that encloses your text. Following the absolute positioning, you will need to include bottom: - something px and left: something px. Subsequently, adjust the padding-top property for the div with the id: social.

For testing purposes, I utilized:

Applying this to .row

position: absolute;
left: 450px;
bottom: -535px;

Adding this to #social

padding-top: 200px;

Although not recommended due to its drawbacks, this method can be employed in the absence of access to the HTML code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When displaying text pulled from MYSQL in a div, white space is eliminated

I'm attempting to display a string that contains both spaces and line breaks. When I output the string as a value in an input field, the spaces are displayed correctly. <textarea rows={15} value={content} /> However, when I try to display ...

javascripthtmlreactjs

Update the appearance of an element in real-time using VUEJS

I am trying to use VueJS to dynamically change the position of a div. In the data function, I have a variable called x that I want to assign to the top property. However, the code I wrote doesn't seem to be working. Here is what it looks like: <tem ...

javascriptcssvue.js

HTML5 Boilerplate and optimizing the critical rendering path by deferring scripts and styles

Previously, I constructed my website layouts using the HTML5 Boilerplate method: incorporating styles and Modernizr in the head section, jQuery (either from Google CDN or as a hosted file) along with scripts just before the closing body tag. This is an exa ...

javascriptjquerycssperformancedeferred-rendering

What's the best way to place the text or operator from a button into an input field?

Hello, I am currently working on developing a calculator. However, I have encountered an issue where clicking on operator buttons such as +, -, /, *, and the dot button does not add them to my input field. Additionally, when these buttons are clicked, the ...

javascripthtmlcss

Styling Text with Shadow Effects in Mobile Web Browsers

I'm attempting to apply a text-stroke effect using text-shadow like this: .text-stroke { text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; } Unfortunately, it's not rendering correctly on mobile versions of Fi ...

htmlcsswebshadowstroke

Enabling the use of special characters when submitting a form

Currently, I am in the process of developing a contact form for a website. My main objective is to enable users to input non-Latin characters such as é or 車. However, I have encountered some challenges regarding where I should implement this feature. On ...

phpjqueryhtmlajaxforms

Tips for resolving an issue with an overflowing Uber React-Vis multicolor bar chart

I am trying to create a multi-colored bar chart using Uber's react-vis library. However, I am encountering an issue where the leftmost bar of the chart is overflowing below the YAxis instead of remaining contained to the right of it. You can view the ...

javascriptcssreactjsreact-vis

Access Denied (missing or incorrect CSRF token): /

After encountering an error while trying to copy code from a website in order to create models for a file upload form for mp3 files, I received the following error messages: Forbidden (403) CSRF verification failed. Request aborted. The reason provided fo ...

htmldjangodjango-modelsaudiodjango-forms

Frequently Asked Questions about Bootstrap Navbars

I designed my NavBar to look a certain way, but I have some inquiries regarding it. https://i.sstatic.net/4nypZ.png This is the code for NavMenu.razor: <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4"> <div class=" ...

bootstrap-4bootstrap-5

Consistent dimensions for columns in a table, automatically adjusting based on content

Can we ensure that all rows and columns maintain equal height, whether or not they contain an image? If you need a visual representation of this concept, refer to this example: [] [] [] ...

csscss-tables

What is preventing Facebook from merging its CSS/JS files together?

I wonder about the reasoning behind Facebook developers' decision not to consolidate their scripts and stylesheets into single files, opting instead to load them on demand through their CDN. Considering the complexity of Facebook as an application, I ...

javascriptcssperformancefacebookcdn

ng-repeat table grouping by date

How can I utilize *ngFor to generate an HTML table grouped by date in columns? Here is an example of a JSON List: [{ "id": "700", "FamilyDesc": "MERCEDES", "model": "Mercedes-BenzClasse A", " ...

javascripthtmlangular

Starting a Fresh Chapter Upon Successful Form Submission with PHP

https://i.sstatic.net/ZEHSL.png I am utilizing PHP to control form elements. If the elements are invalid, I display an error message below them. My issue arises when all form elements are valid, but the page does not redirect to the desired destination pa ...

phphtmlcssformsweb-hosting

How can I retrieve the offset top of a td element in relation to its parent tr element?

Here is some sample dummy HTML code: <table> <body> <tr> <td id="cell" style="height: 1000px; width: 200px;"></td> </tr> </body> </table> I am looking to attach a click event ...

javascriptjqueryhtmlcss

An exciting tutorial on creating a animated dropdown using vueJS

I've set up a navigation menu with mouseover and mouse leave events to toggle a dropdown by changing a boolean value. Now, I'm trying to apply different animations to the list items in the dropdown compared to the surrounding box, but I'm f ...

cssvue.jstransition

Scrolling inside a DIV with fixed positioning

Can you help me with a question? I've been using the jScrollPane plugin and I absolutely love it. However, I'm struggling to retrieve the top position of a div on the page while scrolling inside a jscrollpaned DIV. Using $(window).scroll(); works ...

jqueryhtmlscrollposition

Leveraging the Scroll feature in Bootstrap for smooth scrolling

Seeking assistance with implementing scroll in Bootstrap 5 on my child component (ProductList.vue). Can anyone guide me on how to integrate the code? I have been searching for a solution without success. Below is the Bootstrap 5 code on the child component ...

javascriptcsstwitter-bootstrapvue.js

Unable to be implemented using inline-block styling

I'm struggling to get these 2 elements to display side by side using inline-block, I've tried everything but nothing seems to work. Goal: https://i.sstatic.net/3JfGC.png First element https://i.sstatic.net/GVq91.png https://i.sstatic.net/BIG0D ...

htmlcsstwitter-bootstrapvue.js

What is the process for having HTML open a hyperlink in a new window?

I am facing the following issue: <p class="bigfont"> <img width="4%" src="images/Youtube.png" class="float-left"/ > <a href="\\OC2-RMGFS\Public\Safety\runhidefight-eng.wmv" target="_blank" title="Response to ...

javascripthtmlcss

Can a single SVG file be referenced and reused multiple times in a project?

Instead of repeating these code blocks: <svg class="icon-user"> <use href="LONGFILENAME.svg#icon-user"> </use> </svg> <svg class="icon-user2"> <use href="LONGFILENAME.svg#icon-user2"> </use> </ ...

htmlcsssvg