What is the best way to switch the orientation of divs from horizontal to vertical with CSS?

I currently have a footer setup with 3 divs that are displayed horizontally at the bottom of the page.

<div class="footer-text footer_mainDIV">
    <div class="footer_leftDIV">
        All rights reserved
    </div>
    <div class="footer_middleDIV">
        <a href="url">Help</a>

    </div>
    <div class="footer_rightDIV">
        Version 6.0
    </div>
</div>

To achieve this layout, I've used CSS styling:

.footer_mainDIV {
    position: relative;
    width: 100%;
    border-top: 1px solid #eeeeee;
    margin: auto;
}

.footer_leftDIV {
    text-align: left; 
    position : absolute;
    top: 0px;
    left: 20px;
    height: 50px;
    width: 33%;
    margin: auto;
}

.footer_middleDIV {
    height: 50px;
    width: 33%;
    margin: auto;

}

.footer_rightDIV {
    text-align: right;
    position: absolute;
    top: 0px;
    right: 20px;
    height: 50px;
    width: 33%;
    margin: auto;
}

If you're wondering how to make these divs stack vertically when the browser window is minimized due to lack of horizontal space, you can do so using CSS media queries.

Thank you,

htmlcss

Answer №1

To achieve this effect, you can utilize media queries. In the following example, I have set the target at 480 pixels.

 @media all and (max-width: 480px)
{
 .footer_leftDIV, .footer_middleDIV, .footer_rightDIV
 {
    width:100%;
    position:relative;
    text-align:left;
    left:0;
  }
}

SEE SAMPLE DEMO

Answer №2

You have the option to enhance your existing css with this code snippet

.footer_mainDIV {
    position: absolute;
    width: 100%;
    border-top: 1px solid #eeeeee;
    margin: auto;
    bottom: 0px;
    left:20px;

}

.footer_leftDIV {
    text-align: left; 
    height: 50px;
    width: 33%;
    float:left;
}

.footer_middleDIV {
    height: 50px;
    width: 33%;
    float:left;

}

.footer_rightDIV {
    float:left;
    height: 50px;
    width: 33%;
}

Make sure to place it within a relative property div for optimal functionality.

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

Tips on adjusting the size of an HTML canvas specifically for the display

Currently, I am working on an innovative project utilizing HTML5 and canvas: The challenge at hand is to draw on a canvas with dimensions of 2200px/1600px (width/height), display it on my website in a smaller window sized at 600px/400px. However, post cli ...

jquerycsshtmlhtml5-canvas

Ensure that the child div is anchored to the bottom of the parent div container

I am looking for a way to ensure that the subfooter div stays at the bottom of the childbox div, similar to a footer. You can view the code on this jsfiddle link <div class="parentbox"> <div class="childbox"> <div id="subfooter" ...

htmlcss

Trouble with Bootstrap accordion staying open even after a different one is chosen

Looking for assistance! I am encountering an issue with using jQuery on Bootstrap. The accordion feature is not functioning correctly as it fails to collapse when another section is selected. https://i.stack.imgur.com/uiZPh.png The problem arises when th ...

phphtmljquerycssbootstrap-4

When using the <object> tag, it may not always render at 100% height as intended

Application Inquiry I am seeking assistance with a web page that features a title, and a sticky menu bar at the top, allowing the rest of the space for displaying content. When a menu item is clicked, the objective is to load a page in the content at full ...

htmlcssobjectinnerhtml

Differences in navigation menus on mobile between Chrome and Firefox

I am struggling to understand why the mobile sub menu on my website is displaying differently in Chrome compared to Firefox. If you visit and view it at a resolution below 1200px, you can click on the menu toggle to open up the menu and hover over the Pro ...

htmlcssgoogle-chromefirefox

Using Styled Components to achieve full width for input tag in relation to its parent

I am working with an input field that has a specific width set. My goal is to increase the width of this input field to 100% by selecting it from its parent component. Is there a way to achieve this without passing an explicit width prop in the styled c ...

javascripthtmlcssreactjsstyled-components

When importing both shared-lib and MUI in my ReactJS application, I noticed that my custom MUI styles were being overwritten by the MUI styles

I have developed a shared library using React and Storybook. Within this library, I am utilizing the MUI V5 Button and making some style modifications using CSS modules. I executed the "build&pack" script in my library, which generated a tgz package that ...

cssreactjsmaterial-ui

Guide on centering text vertically in Bootstrap 4

As I begin my journey with Bootstrap, I encountered a challenge while attempting to vertically align text. The issue arises when displaying a modal window from a partial view and trying to showcase an icon and a title in the header: Below is the page cont ...

cssbootstrap-4bootstrap-modal

What methods can I use to accomplish the transformation of superimposed images?

Struggling with transforming a content box on my webpage. I have a div containing three overlapping images positioned using Grid, and I want to scale one of them to fill the entire div when scrolled over. While I managed to achieve this effect, I'm un ...

javascripthtmlcssvue.js

Codeception is unable to interact with an element that it recently encountered

Greetings to the wonderful users of Stackoverflow, Currently, I am in the process of creating acceptance tests using Codeception with Selenium as the WebDriver module. I have encountered an issue while trying to verify the existence and functionality of o ...

htmlseleniumcodeceptionacceptance-testing

Position an image alongside text and button within a Bootstrap card

I am attempting to accomplish this: https://i.sstatic.net/VhryE.png this is the code I am using and the output <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <div class="row"> & ...

htmlcssbootstrap-4

Adjust the CSS for the "a" tag's "title" attribute

I am using jquery.fancybox to create an image modal on my website. I have noticed that I can add a description using the title attribute. However, when the description is too long, the text is displayed on a single line and some of it disappears. How can ...

javascriptjqueryhtmlcssangularjs

Hugo inquired about the process of including a class specifically for the final post

I've set up my baseof.html file to add the class first-post to the body tag in order to style the first post differently from the rest, especially when paginated: <body class=" {{ with where site.RegularPages "Type" "posts" }} {{ $first_post = ind ...

csshugo

Challenges with HTML and JavaScript

Struggling to get this code to work properly with Node.js. const express = require('express') const app = express() app.use(express.static('public')) //includes content of public folder app.get('/', function (req, res){ ...

javascripthtmlnode.js

Differentiate the items within a list containing identical divs using JavaScript

Currently, I am expanding my knowledge in HTML, CSS, and JS by incorporating Angular and JQuery. In one of my projects, there is a div labeled "eventBoxes" where multiple divs known as "eventBox" can be added. I have created a template for the eventBox i ...

javascripthtmlangularjs

In what way is the background-color of WindowInfoBackground utilized?

I attempted to implement background-color : WindowInfoBackground;. The property background-color : WindowInfoBackground; allows for the assignment of the system color to the background-color attribute. Despite using this particular value, the backgroun ...

css

Adding input values to a jQuery Ajax POST request

I am currently attempting to send form values to a remote API using AJAX. The necessary information I require from the HTML form element includes the author, string, false, and true. At the moment, I have hard-coded some values but... function sendData ...

javascriptjqueryhtmlajax

Tips on moving the first item on the Bootstrap navigation bar to the left side

I have successfully implemented a Bootstrap navigation bar and created a container to display some descriptive text beneath it, as depicted in the image provided. Utilizing the most up-to-date version of Bootstrap has ensured smooth integration. https://i ...

htmlcsstwitter-bootstrapalignmentbootstrap-4

The JavaScript code is failing to retrieve the longitude and latitude of the location on a mobile browser

I am having an issue with my Javascript code not properly retrieving the longitude and latitude from the mobile Chrome browser. While this code works fine on laptop or desktop browsers, it seems to be failing on mobile devices: <script> if (nav ...

javascriptphphtmlmobilelocation

When I hover my mouse over the items on the Navigation bar, they shift forward

Seeking assistance with a coding issue. When hovering over TOYOTA, the HONDA and CONTACT US sections move forward unexpectedly. This movement is unwanted as I would like only the next list item to display when hovering over TOYOTA and HONDA. How can I corr ...

htmlcss