Question

I have a mostly fixed 2-column layout:

• 1st column that takes as much space as it needs
• and the 2nd column that has a fixed width and is floated to the right

I want to make it a responsive design, so in smaller screen sizes, the 2nd column ends below the 1st column. This means that the HTML for the 2nd column has to be after the 1st column.

My problem is that I can’t seem to float the right column properly when using that mark-up. It ends up floated, but is below the main content.

Here’s a sample code:

HTML:

<div class='content'>
    sdaohdosahdaf
    <br />adfafhaskldjs sgdafadkfjas
    <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad</div>
<div class='sidebar'>
    daobfhaohfasod agsdjfa
    <br />sidjaofhad
    <br />sojghfadpfjas
</div>

CSS:

.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    float: right;
    width: 120px;
    background-color: lightgreen;
}

JS fiddle here: http://jsfiddle.net/zinkkrysty/U3fA8/

I tried also using negative margins, but can’t seem to do it.

If you have any other approaches to my problem (except setting a width on the first column), please give it a go

Answer 1

Put them into a parent and set the position of the side bar as absolute, then use a different set of styles for the responsive display

html

<div class="parent">
    <div class='content'>
        sdaohdosahdaf
        <br />adfafhaskldjs sgdafadkfjas
        <br />saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad
    </div>
    <div class='sidebar'>
        daobf haohf asod agsdjfa
        <br />sidja ofhad
        <br />sojgh fadpfjas
    </div>
</div>

css

.parent {
    position: relative;
}
.content {
    background-color: lightblue;
    margin-right: 120px;
}
.sidebar {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 120px;
    background-color: lightgreen;
}
/* Responsive bit */
@media only screen and (max-width: 320px) {
    .content {
        background-color: orange;
        margin-right: 0px;
    }
    .sidebar {
        background-color: red;
        position: relative;
        width: 100%;
    }
}

Example