diff --git a/web/calendar/calendar.css b/web/calendar/calendar.css
--- a/web/calendar/calendar.css
+++ b/web/calendar/calendar.css
@@ -1,3 +1,8 @@
+.container {
+  display: flex;
+  flex-direction: row;
+}
+
 .filtersButton {
   color: var(--fg);
   background-color: var(--filters-button-bg);
@@ -20,7 +25,6 @@
 
 div.content {
   height: 100%;
-  position: relative;
   overflow: auto;
 }
 
diff --git a/web/calendar/calendar.react.js b/web/calendar/calendar.react.js
--- a/web/calendar/calendar.react.js
+++ b/web/calendar/calendar.react.js
@@ -159,11 +159,9 @@
     }
 
     let filterPanel = null;
-    let calendarContentStyle = null;
     let filterButton = null;
     if (this.state.filterPanelOpen) {
       filterPanel = <FilterPanel toggleFilters={this.toggleFilters} />;
-      calendarContentStyle = { marginLeft: '300px' };
     } else {
       filterButton = (
         <a className={css.filtersButton} onClick={this.toggleFilters}>
@@ -173,9 +171,9 @@
     }
 
     return (
-      <div>
+      <div className={css.container}>
         {filterPanel}
-        <div className={css.content} style={calendarContentStyle}>
+        <div className={css.content}>
           <div>
             {filterButton}
             <nav className={css.nav}>
diff --git a/web/calendar/filter-panel.css b/web/calendar/filter-panel.css
--- a/web/calendar/filter-panel.css
+++ b/web/calendar/filter-panel.css
@@ -1,8 +1,5 @@
 div.container {
-  position: fixed;
   width: 300px;
-  top: 126px;
-  bottom: 0;
   background-attachment: fixed;
   display: flex;
   flex-direction: column;