# Responsive / CSS fixed and variable widths

CSS and responsiveness in multiple columns with fixed and scaleable elements can be done in many ways.

I have created a solution that seems to work, though I have no idea whether this is best practice.

Fiddle

CSS

html, body { margin:0 auto; padding:0;  background: #fff; text-align: center; }

/* Clearfix
============================================================================ */
.CF { display:inline-block;overflow:hidden; }

/* Elements
============================================================================ */
div#container {max-width: 1140px;  min-width: 960px; margin:0 auto; margin-top: 10px; padding:0;  background:#0F9;  position:relative;}
div#left-menu {width: 100px; background:#F30; position: absolute; top:0; left:0;   }
div#information {padding: 10px 10px 25px 10px; background:#39C;  margin-left:100px;}
div#information-wrapper {position:relative; background:#3FF; }
div#information-left-menu {width: 125px;  background:#C30; position: absolute; top: 0; left:0;}
div#content {background:#FC0; margin-left: 125px; text-align:left;}


HTML

<div id="container" class="CF" >

<!-- This is fixed Width -->
<p>Left 100px wide </p>
</div>

<!-- Width scales to size of Container -->
<div id="information" class="CF">
<div id="information-wrapper">
<div id="information-left-menu">Fixed width of 125px </div>
<div id="content">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
</div>

</div><!-- / END / Container / -->

• It's not really a responsive layout if you need to scroll horizontally on a viewport that's less than 960px wide, is it? – Dagg Jun 20 '14 at 7:28
• /* IE mac \*/ <- Are there actually people using IE for Mac? Does IE even work on OSX? – cimmanon Jun 21 '14 at 22:45
• @Dagg It's responsive if it adjusts to browser size. I am trying to understand best practice of fixed width and scalable columns. – Brandrally Jun 22 '14 at 2:16
• @cimmanon Good point. That doesn't really need to be there. – Brandrally Jun 22 '14 at 2:19
• @Dagg That's not what "responsive" means in the context of web design. What you have is liquid and that's it. That's been around forever. Also, please refrain from modifying your code once you get some actual reviews, as it will invalidate the answers. – cimmanon Jun 22 '14 at 10:05

• Absolute positioning of the "left menu". In general, absolute positioning should be avoided unless it is absolutely necessary (eg. drop menus, etc.). Absolutely positioned elements can become cut off if there's not enough surrounding content to prevent it from overflowing its ancestor elements. Multi-column layouts can easily be done using floats or the table display properties (eg. display: table-cell) and the content won't get cut off.