Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
css: fixed width column to the right and flexible full-width left-column
/* 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;
}
<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>
/* 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
You can’t perform that action at this time.