this content was originally posted here.

css grid sidebar main content fluid layout with fallback

this is a continuation from the original post with added fallback for older browsers that do no support the grid elements yet.

I have tested this fallback in IE11 and it seems to work well, if you want your column layout to behave normally in older non css grid browsers. This uses the @supports css tag.

The difference with this is that the divs stay at a % if it does not support grid.

Resize in IE11

Here you can see how both columns change size when the screen is resized.

Resize in Chrome

And here you can see the fixed width of the left, while the right content resizes.

css

.widgets {
	width:30%;
	float:left;
}
.page-content {
	width:60%;
	float:left;
	margin-left:20px;
}
@supports (display: grid) {
	.widgets {
		width:auto;
		float:none;
	}
	.page-content {
		width:auto;
		float:none;
		margin-left:0px;
	}
}
.middle-content {
	background:#FFF;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
	padding:20px 20px;
	margin:40px auto;
	overflow:auto;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: 240px auto;
	grid-template-areas: "widgets content";	
}
.widgets {
	grid-area: widgets;
}
.page-content {
	background:#CCC;
	grid-area: content;
}
.box {
	background:#666;
	padding:30px;
	border-radius: 5px;
	min-height:300px;
}

html

<div class='wrap middle-content'>
    <div class='widgets'>
        <div class='box'></div>
    </div>
    <div class='page-content'>
        <div class='box'></div>
    </div>
</div>

example

Related Links

https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks

Demo

database file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/db.db
comments_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/comments.db ($db_comments)
views_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/views.db
$dbfood_file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/food.db
db_linx: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/linx/db/db.db
Classes Loaded:
class/answers.class.php
class/code.class.php
class/comments.class.php
class/content.class.php
class/core.class.php
class/crud.class.php
class/crumbs.class.php
class/featured.class.php
class/food.class.php
class/functions.class.php
class/images.class.php
class/import.class.php
class/links.class.php
class/questions.class.php
class/template.class.php
class/tv.class.php
class/user.class.php
class/utilities.class.php
class/views.class.php
class/widget.class.php
Class Extend Loaded: class/extends/expenses.extend.php
Class Extend Loaded: class/extends/gary_cummins_timeline.extend.php
Class Extend Loaded: class/extends/moo.extend.php
Class Extend Loaded: class/extends/osrs_item_data.extend.php
Class Extend Loaded: class/extends/osrs_slayer.extend.php
Class Extend Loaded: class/extends/osrs_slayer_monsters.extend.php
Class Extend Loaded: class/extends/searches.extend.php
Core Database Connected: expenses.db
expenses add_to_menu:
Class Extend Auto Initialized as: expenses
Core Database Connected: gary_cummins_timeline.db
gary_cummins_timeline add_to_menu:
Class Extend Auto Initialized as: gary_cummins_timeline
Core Database Connected: moo.db
moo add_to_menu:
Class Extend Auto Initialized as: moo
Core Database Connected: osrs_item_data.db
osrs_item_data add_to_menu:
Class Extend Auto Initialized as: osrs_item_data
Core Database Connected: osrs_slayer.db
osrs_slayer add_to_menu:
Class Extend Auto Initialized as: osrs_slayer
Core Database Connected: osrs_slayer_monsters.db
osrs_slayer_monsters add_to_menu:
Class Extend Auto Initialized as: osrs_slayer_monsters
Core Database Connected: searches.db
searches add_to_menu:
Class Extend Auto Initialized as: searches
$user_logged_in:
user access level:
pages:
$p1:view
$p2:code
$p3:fHNMB
$p4:css-grid-sidebar-main-content-fluid-layout-with-fallback
$p5:
$p6:
$p:/view/code/fHNMB/css-grid-sidebar-main-content-fluid-layout-with-fallback/
Using Template: view-code.html