2
\$\begingroup\$

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 / -->
\$\endgroup\$
  • 2
    \$\begingroup\$ It's not really a responsive layout if you need to scroll horizontally on a viewport that's less than 960px wide, is it? \$\endgroup\$ – Dagg Jun 20 '14 at 7:28
  • \$\begingroup\$ /* IE mac \*/ <- Are there actually people using IE for Mac? Does IE even work on OSX? \$\endgroup\$ – cimmanon Jun 21 '14 at 22:45
  • \$\begingroup\$ @Dagg It's responsive if it adjusts to browser size. I am trying to understand best practice of fixed width and scalable columns. \$\endgroup\$ – Brandrally Jun 22 '14 at 2:16
  • \$\begingroup\$ @cimmanon Good point. That doesn't really need to be there. \$\endgroup\$ – Brandrally Jun 22 '14 at 2:19
  • \$\begingroup\$ @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. \$\endgroup\$ – cimmanon Jun 22 '14 at 10:05
3
\$\begingroup\$

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:

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.
\$\endgroup\$
  • \$\begingroup\$ really appreciate your input and thoughts. Thank you for taking the time to respond to this topic. \$\endgroup\$ – Brandrally Jun 30 '14 at 10:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.