Adjusting CSS Div Blocks for Different Screen Sizes

Question

Adjusting CSS Div Blocks for Different Screen Sizes

I am currently working on designing a page layout that includes two sidebars and a main article area. My goal is to have the sidebars stack vertically beside the main area when viewed on a tablet or phone, with both eventually moving below it. However, I am facing an issue where I cannot get them to display in the correct order after re-ordering.

The three sections on the left show how I want the layout to look on desktop/tablet/phone, while the right pages show how it currently appears. Essentially, I need section 5 to move up under section 4 and section 3 to move beside sections 4 and 5 for the tablet view. Then for the phone view, section 4 should move down under section 3.

Hopefully that explanation makes sense. I am using Dreamweaver for this project. Thank you for any assistance!

Click here to see a visual representation of what I mean!

html css

Answer 1

Answer №1

To achieve this, it is necessary to have knowledge of specific heights.

Here is the demo link: http://jsfiddle.net/BramVanroy/Pt7sS/

In order for this code to function properly, the heights of #contentWrap and #sideRight must be determined. If these values are unknown, they can be obtained using jQuery.

html, body, #header1, #header2, #contentWrap {
    width: 100%
}

#header1 {
    background: red;
    height: 50px
}

#header2 {
    background: green;
    height: 40px
}

#sideLeft, #main, #sideRight {
    box-sizing: border-box;
    float: left;
    height: 200px
}

#sideLeft, #sideRight {
    width: 20%;
    background: #333
}

#main {
    background: grey;
    width: 60%
}

@media screen and (max-width: 768px) {
    #main {
        float: right;
        width: 65%
    }

    #sideRight {
        clear: left
    }

    #sideRight, #sideLeft {
        width: 35%;
        height: 100px
    }
}

@media screen and (max-width: 480px) {

    #sideLeft, #main, #sideRight {
        float: none;
        width: 100%;
        position: absolute
    }

    #contentWrap {
        position: relative;
        height: 400px
    }

    #main {
        top: 0
    }

    #sideLeft {
        bottom: 100px
    }

    #sideRight {
        bottom: 0
    }
}

Answer 2

To achieve this, it is necessary to have knowledge of specific heights.

Here is the demo link: http://jsfiddle.net/BramVanroy/Pt7sS/

In order for this code to function properly, the heights of #contentWrap and #sideRight must be determined. If these values are unknown, they can be obtained using jQuery.

html, body, #header1, #header2, #contentWrap {
    width: 100%
}

#header1 {
    background: red;
    height: 50px
}

#header2 {
    background: green;
    height: 40px
}

#sideLeft, #main, #sideRight {
    box-sizing: border-box;
    float: left;
    height: 200px
}

#sideLeft, #sideRight {
    width: 20%;
    background: #333
}

#main {
    background: grey;
    width: 60%
}

@media screen and (max-width: 768px) {
    #main {
        float: right;
        width: 65%
    }

    #sideRight {
        clear: left
    }

    #sideRight, #sideLeft {
        width: 35%;
        height: 100px
    }
}

@media screen and (max-width: 480px) {

    #sideLeft, #main, #sideRight {
        float: none;
        width: 100%;
        position: absolute
    }

    #contentWrap {
        position: relative;
        height: 400px
    }

    #main {
        top: 0
    }

    #sideLeft {
        bottom: 100px
    }

    #sideRight {
        bottom: 0
    }
}

Adjusting CSS Div Blocks for Different Screen Sizes

Answer №1

Similar questions

Submitting selected options from radio buttons to the server-side using HTML

Captivating Images accompanied by Descriptive Captions

There seems to be an issue with d3js bar charts as they are not displaying on the screen and there

Press a button to navigate through a series of web pages

How can I display two different styles on a single page in ASP.NET MVC without any conflicts between CSS classes?

How to use TypeScript to set a value in ng2-ckeditor

Encasing extracted content in <p> tags

What is the best way to activate a click event when I set a radio button to checked?

Tips for creating a flexible popover widget

Is there a way to create an HTML popup that automatically opens a link and an image file side by side

The Android smartphone is experiencing issues with the responsive design not aligning properly on the

Issue on my website specifically occurring on Google Chrome and mobile devices

Tips for obtaining the sources of every image on a webpage and consolidating them in a single section

What's the name of the auto-triggered dropdown menu feature?

Accelerate blinking timer by utilizing CSS3 animations

Error message: Laravel 8 and Ajax - 405 Error - Method Not Allowed

Tips for increasing the dimensions of a modal in Bootstrap

AngularJS tips for resolving an issue when trying to add duplicates of a string to an array

PHP Retrieve Current Time with AM/PM Display

I'm having trouble getting my login page centered when using Semantic UI