Simple 2 Column, Responsive Layout using CSS – Without Absolute Positioning


This is a simple method, using the inline-block display type, to create a responsive, two-column CSS layout without any absolute positioning or floating elements.

I often get asked to fix up sites. One recent problem I encountered was on a site with a custom responsive layout, where the two main columns were constantly repositioned with floats, margins and absolute positioning. Removing the need for clearing floats and stopping the content of absolutely positioned elements from spilling over into other areas of the site, this method maintains page flow and allows both your columns to stretch effectively.

See the Pen Simple 2 column responsive layout without absolute positioning by Rose Mckeon (@rosemckeon) on CodePen.

 

If you’re working on a project where including an entire grid system is overkill, give this 2 column layout a shot. To see it in action, view the demo above on Codepen┬áso you can resize the window and fiddle with the code yourself.

For a more robust solution, when you’re not working backwards, take a look at Foundation – an excellent framework and grid system, for full control over your responsive design.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>