Skip to content

Instantly share code, notes, and snippets.

@lsauer

lsauer/left-flexible-right-fixed.css

Created February 5, 2015 07:54
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lsauer/2f42adf0285af7bde1e2 to your computer and use it in GitHub Desktop.
Save lsauer/2f42adf0285af7bde1e2 to your computer and use it in GitHub Desktop.
Download ZIP
css: fixed width column to the right and flexible full-width left-column
Raw
left-flexible-right-fixed.css
/* lsauer.com, 2015 */
.left-flexible-right-fixed .container {
height: auto;
overflow: hidden;
}
.left-flexible-right-fixed .left-inner{
width: 100%;
}
.left-flexible-right-fixed .right {
width: 180px;
float: right;
background: #ccc;
}
.left-flexible-right-fixed .left {
background: #ccc;
/* separation properties: */
width: auto;
overflow: hidden;
float: none !important;
}
Raw
left-flexible-right-fixed.html
<head><title>css: fixed width column to the right and flexible full-width left-column - lsauer.com, 2015 </title></head>
<body>
<div class="left-flexible-right-fixed container">
<div class="right">---right!---</div>
<div class="left"><input type="text" value="---left!---" /></div>
</div>
</body>
Raw
left-flexible-right-fixed.less
/* lsauer.com, 2015 */
.left-flexible-right-fixed {
.container {
height: auto;
overflow: hidden;
}
.left-inner {
width: 100%;
}
.right {
width: 180px;
float: right;
background: #ccc;
}
.left {
background: #ccc;
width: auto;
overflow: hidden;
float: none !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment