css fluid layout with fixed column

Question

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!

John Doe Smith · Accepted Answer · 2014-03-13 18:45:24Z

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

user2782001 · Accepted Answer · 2014-03-12 19:05:46Z

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

does not work like expected. as i mentioned above. col2 should be below col1. isn't there an other way but swapping the divs in html? it's so simple, but hard to realize...

Collectives™ on Stack Overflow

css fluid layout with fixed column

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related