Aligning divs with responsive design

Question

I have 2 divs that I'm trying to align a certain way with it being responsive. I basically want the right div to be on top of the left div when the width of the screen reaches a certain width. Right now they are setup splitting the 100% width of the container.

The left side is the form and the right side is the content. I want the content on top of the form to fit the width of a mobile screen. I like how the width is setup to be viewed on the desktop/laptop setting. I hope this makes sense.

Is there a way to do this with CSS or do I need JQuery for this? Please let me know if this is unclear.

CSS

#left {
float:left;
width:65%;
border-radius: 25px;
background-color: #F8F8F8 !important;   
}

#right {
float:right;
width:35%;
background-color: white !important;
padding-left: 40px;
}

Answer 1

If I understand you correctly, this JSFiddle is doing what you'd like it to do.

http://jsfiddle.net/isherwood/wgbn8c0d/1/ (Thanks to iSherwood for fixing the CSS)

Here's a way to do this with only CSS and CSS's @media queries:

#left {
    float: left;
    border: 1px solid black;
    width:calc(65% - 26px);
    border-radius: 25px;
    background-color: #F8F8F8 !important;
}
#right {
    border: 1px solid black;
    float: right;
    width:calc(35% - 40px);
    background-color: white !important;
    padding-left: 40px;
}
@media screen and (max-width: 500px) {
    #left {
        display: block;
        width: 100%;
    }
    #right {
        display: block;
        width: 100%;
    }
}

Answer 2

The short answer is no you don't need jQuery and yes you can use CSS.

What you need is a grid system. The underlying grid will be using media queries to get the screen size, which you can do as well, but a grid system would be better as far as covering edge cases and you wouldn't have to reinvent the wheel.

A couple of popular grid systems to take a look at:

• Skeleton
• Foundation
• Bootstrap

In my humble opinion if you are trying to do something simple Skeleton would be the best place to start because it will give you an efficient grid without getting in your way with other opinionated features (like colored buttons).

But if you want your CSS framework to define other parts of your style as well feel free to go for Foundation and Bootstrap which are (arguably) more popular.

Answer 3

Ideally you could accomplish this using media queries to detect at what screen width you want them to stack.

At that width say it's 768px for instance. You could then remove the float values and set the widths to 100%. If you mark up your HTML so that the right section of content is coded before the left then it will just naturally be rendered first above the left side.

Answer 4

 #container { display: flex; } #left { order: 1; width:65%; border-radius: 25px; background-color: #F8F8F8 !important; } #right { order: 2; width:35%; background-color: white !important; padding-left: 40px; } @media only screen and (max-width: 767px) { #left, #right { width: 100%; } #left { order 2; } #right { order: 1; } } 

If you don't have to support IE9 and below you can use display: flex and then just change the order of the items on the breakpoint where you want them to stack