CODEWITHSUNDEEP
csscss-floatfluid-layoutfixed-width
John Doe Smith
John Doe Smith

Reputation: 1643

css fluid layout with fixed column

I want to have a fluid content-column and a fixed-width sidebar. If browser resizes and content-column gets to small, a media query puts the sidebar below the content.

OK here is what I have @ jsfiddle

… the css:

section {
    width: 100%;
}
#wrap {
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
}
#col1 {
    float: left;
    width: 200px;
    height: 100px;
    background: lightgreen;
}
#col2 {
    width: 100%;
    height: 100px;
    background: lightblue;
}
@media only screen and (max-width: 400px) {
    #col1 {
        float: none;
        width: 100%;
    }
}

… html:

<section>
    <div id="wrap">
        <div id="col1"></div>
        <div id="col2"></div>
    </div>
</section>

I know that this is exactly the other way round. I want col2 to have a fixed width and to be on the right side. If I change the float-value to "right", col1 will be on the right side, which is wrong. If I swap all values of #col1 and #col2, col2 will appear below col1 which is also not my intention. I can't use flex box, because of limited browser support.

How can I solve this?

Thx in advance!

Upvotes: 1

Views: 855

Answers (2)

John Doe Smith
John Doe Smith

Reputation: 1643

ok. i found a quite nice solution: http://jsfiddle.net/yyAFq/

with table and table-cell. perfect browser-support!

section {
    width: 100%;
}
#wrap {
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
    display: table;
}
#col1 {
    width: 100%;
    height: 100px;
    background: lightblue;
    display: table-cell;
}
#col2 {
    width: 200px;
    height: 100px;
    background: lightgreen;
}
h1 {
    height: 40px;
    width: 50px;
    background: red;
}
h1, p {
    display: inline-block;
    vertical-align: bottom;
}
p {
    display: inline-table;
    width: 100%;
}
@media only screen and (max-width: 400px) {
    #col1 {
        display: block;
    }
    #col2 {
        width: 100%;
    }
}

Upvotes: 1

user2782001
user2782001

Reputation: 3488

Well this is my solution...

http://jsfiddle.net/x5fb4/2/

It does what you want, but I used a "javascript media query"- which is to say I check the screen size with javascript and adjust with that.

#col1 {
//width added at runtime by javascript (see jsfiddle)
display:inline-block;
height: 100px;
background: lightblue;
}

Upvotes: 0

Related Questions