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;
}

Show your markup, please. Where are your mobile (full width) styles? You'll probably want to use media queries for width. — isherwood, Jul 07 '15 at 20:24
use [CSS media queries](https://css-tricks.com/css-media-queries/) and on [SO](http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — Amit, Jul 07 '15 at 20:25

shermanzach · Accepted Answer · 2015-07-07T20:35:22.750

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%;
    }
}

edited Jul 07 '15 at 20:35

answered Jul 07 '15 at 20:30

shermanzach

591
1
6
14

Right column should be on top for mobile. Floats are probably necessary. http://jsfiddle.net/isherwood/wgbn8c0d/1/ – isherwood Jul 07 '15 at 20:32
Thank you all. This is exactly what i was looking for. – user4739731 Jul 07 '15 at 20:35
@user4739731 I've updated the fiddle (thanks @isherwood) to put the right side on top. – shermanzach Jul 07 '15 at 20:37
Thank you again for the quick responses. – user4739731 Jul 07 '15 at 20:38
Why don't you use `box-sizing` instead of `calc()`? – Stickers Jul 07 '15 at 20:47
@Pangloss I just knew calc() off the top of my head, I'm not familiar with box-sizing. – shermanzach Jul 07 '15 at 21:01

2016rshah · Answer 2 · 2015-07-07T20:37:05.277

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:

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.

score 0 · Answer 3 · answered Jul 07 '15 at 20:30

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.

score 0 · Answer 4 · answered Jul 07 '15 at 20:34

#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

Aligning divs with responsive design

4 Answers4