Responsive / CSS fixed and variable widths

Question

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 -->
    <div id="left-menu">
    <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 / -->

Answer 1

To have a responsive web design, you need to do more than have no horizontal scrolling when viewed with a desktop browser. You have to adapt to the viewport of any device, from the really small (phone) to the really big (desktop). This code does not, sorry.

Responsive web design is typically achieved by using media queries (there are other ways, but they're unavailable in IE versions older than 10), which are completely absent from your code. I suggest you take the time to learn about what responsive web design is:

• http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/
• http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
• http://www.html5rocks.com/en/mobile/responsivedesign/
• http://thesiteslinger.com/blog/responsive-design-why-youre-doing-it-wrong/
• http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

That said, there are other things that are not good here:

• 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.
• Using px to restrict the width of text containing elements. If the user needs to increase their font-size for accessibility reasons, 100-125px is no longer an appropriate sized container for that text. You should be using ems or other relative units instead.
• No semantic markup. With HTML5 (see: http://html5doctor.com/), a whole slew of new semantic container elements have been added (eg. article, nav, aside, section) which may or may not be more appropriate than the general purpose div (I can't tell because there's no real content here). Markup should be chosen to describe the content first, then you can worry about how to make it pretty.