Looking for elegant Overflow solutions

Question

I'm looking for a solution to the following problem:

The content div is set to width:65% (float left) and the sidebar is set to 30% (float right).

    #container {
    margin: 0px auto 40px auto;
    padding: 20px 70px 70px 70px;
    overflow:auto;
    max-width: 1000px;
    border: 1px solid white;
}

    #content {
    margin: 0 20px 0 0;
    float: left;
    width: 65%;
    overflow-x: hidden;
}

        #sidebar {
    float:right;
     width:30%;
     }

I'd like to achieve the following effect:

A) As long as the width of the #container exceeds 600px, I want the #content to take up 65% on the left and the #sidebar to automatically fill up the remaining space on the right.

B) As soon as the width of the #container is smaller than 601px (due to being on a mobile device or resizing the browser window), I'd like the #content div to fill 100% of the width of the #container, and for the #sidebar to jump down below it (and fill 100% of the width of the #container as well!).

Are these things possible? My searches turned out nothing, though it's likely I didn't ask the proper questions.

Answer 1

In your CSS you can add media queries. for example:

@media all and (min-width: 600px) {
// add styles in here for screens 600px +
    #content {
width:65%;
}
}
// styles for screens < 600px will go here

The styles for screens < 600px will not need a media query because the style sheet is already checking if the screen is 600px plus, so if it's not then it will be less than 600px.

Apologies for the rubbish explanation, I would make a terrible school teacher ;)

Here's a link to an article that explains it well