Left & Right Halves Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>Some Example from CSS-Tricks</title>
	
	<style type="text/css">
	   
	   * { margin: 0; padding: 0; }
	   p { padding: 10px; }
	   #left { position: absolute; left: 0; top: 0; width: 50%; }
	   #right { position: absolute; right: 0; top: 0; width: 50%; }
	
	</style>
</head>

<body>

    <div id="left">
        <p>Left Half</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>

    <div id="right">
        <p>Right Half</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>

</body>

</html>

Comments

  1. User Avatar
    Sunny Singh
    Permalink to comment#

    Better to use floats, but I think this technique has the same effect. Good to use with a relatively positioned wrapper though.

  2. User Avatar
    Brian
    Permalink to comment#

    Indeed if you need 2 columns inside a parent div make sure you set the parent div to “position:relative;” in order to properly contain absolutely positioned child elements.

    Example:

    #pagewrap {width:100%; position:relative;}
    #left { position: absolute; left: 0; top: 0; width: 50%; }
    #right { position: absolute; right: 0; top: 0; width: 50%; }
    
  3. User Avatar
    Dor
    Permalink to comment#

    Floats are better in this case. I generally try to avoid position: absolute;, especially on critical layout components.

  4. User Avatar
    jeff sturgis
    Permalink to comment#

    Float has its problems as well and creates the need for additional float clearing css.

  5. User Avatar
    Daniel Veiga
    Permalink to comment#

    @Jeff:

    I’d rather use additional rules for clearing a float in CSS than having absolute positioning – sometimes it can get a tad bit messy.

  6. User Avatar
    Rajinder Sandhu
    Permalink to comment#

    Better to use floats for layout division. Also in place of using * to reset the style of html elements, I would encourage to use reset for individual elements in group

  7. User Avatar
    Der
    Permalink to comment#

    y go throught all that trouble when just use tables no hacking this n that

    • User Avatar
      Julian Cizmic

      Are you still stuck in 1995? ;)

    • User Avatar
      gann

      I agree, just cause some new ways appear, doesn’t mean u have to use them.

      i.e bgColor=gray, though dep’d will never go away, cause basic browsers will always need them.

  8. User Avatar
    Hallucinogenizer
    Permalink to comment#

    It’s a new solution, though it can be easily done through tables.

    Trying Left and Right Halves
    
    table {
        width:100%;
    }
    td {
        width:50%;
        overflow:visible;
        vertical-align:top;
    }
    
    
    
    
    
    
    <!-- Left half -->
    Something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something.
    <!-- Right half -->
    While  something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something is something.
    
    
    
    
    

    Still, it’s a new way to do things. You never know where you find it handy and how…

  9. User Avatar
    tim
    Permalink to comment#

    Let toss Flex Box into the ring. It would easily handle this, no clearing, no absolutes.

  10. User Avatar
    Joah
    Permalink to comment#

    Why not use “display: inline-block”, then set the width to 50%. It’s more handy.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      If there is any whitespace between the two elements, they will wrap, which is a pretty fragile thing.

      These days I’d probably do…

      .halfs {
        display: flex;
      }
      .half { /* child of .halfs */
        width: 50%;
      }
      
  11. User Avatar
    James Brooks
    Permalink to comment#

    Agreed with Chris above, see https://codepen.io/anon/pen/addNyK

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag