Carnegie Mellon University

Top

USER1

.user1 {
}

USER2

.user2 {
float:right;
width:240px;
}

USER2 - second block

.user2 {
float:right;
width:240px;
}

Wireframe

Paragraph. Lorem ipsum dolor... Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

To get overlay add ?tp=1 to the URL

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
 

USER3

.user3 {
float:left;
width:50%;
}

User3 - second block

.user3 {
float:left;
width:50%;
}

USER4

.user4 {
}

Debug

<!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" xml:lang="en-us" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="title" content="" />
<meta name="author" content="" />
<meta name="description" content="" />
<title></title>
<link href="/branding/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="/branding/css/basic.css" type="text/css" media="projection,screen" />
<link rel="stylesheet" href="/branding/css/structure.css" type="text/css" />
<link rel="stylesheet" href="/branding/css/surface.css" type="text/css" />
<link rel="stylesheet" href="/branding/css/elements.css" type="text/css" />
<!--[if IE 7.0]>
<style type="text/css">.clearfix{display:inline-block;}</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">.clearfix {height: 1%;}</style>
<![endif]-->
</head>
<body id="body" class="fs3 FF">
<!-- BEGIN: ACCESSIBILITY -->
<a name="Top" id="top"></a>
<ul class="accessibility">
  <li><a href="#oli-content" title="Skip to content">Skip to content</a></li>
</ul>
<!-- END: ACCESSIBILITY -->

<div id="oli-wrap">

  <!-- BEGIN: HEADER -->
  <div id="oli-headerwrap">
    <div id="oli-header" class="clearfix">
    
      <!-- BEGIN: SYSTEMNAV -->
      <div id="oli-systemnav">
        <!-- INNER: SYSTEMNAV -->        
      </div>
      <!-- END: SYSTEMNAV -->

      <!-- BEGIN: HEADNAV -->
      <div class="oli-headnav">
        <!-- INNER: HEADNAV -->        
      </div>
      <!-- END: HEADNAV -->
    
    </div>
  </div>
  <!-- END: HEADER -->

  <!-- BEGIN: TOP -->
  <div id="oli-topwrap">
    <div id="oli-top" class="clearfix">
      <!-- INNER: TOP -->      
    </div>
  </div>
  <!-- END: TOP -->

  <!-- BEGIN: WRAP CONTAINER + LEFT -->
  <div id="oli-container2" class="clearfix">
    <div id="oli-containerwrap">
      <div id="oli-container">
      
        <!-- BEGIN: USER1 -->
        <div id="oli-user1wrap">
          <div id="oli-user1">
            <!-- INNER: USER1 -->              
          </div>
        </div>
        <!-- END: USER1 -->
      
        <!-- BEGIN: USER2 -->
        <div id="oli-user2wrap">
          <div id="oli-user2">
          <!-- INNER: USER2 -->
            <div class="moduletable">
              <!-- INNER: USER2 BLOCK 1 -->              
            </div>
            <div class="moduletable">
              <!-- INNER: USER2 BLOCK n -->              
            </div>
          </div>
        </div>
        <!-- END: USER2 -->
      
        <!-- BEGIN: MESSAGE -->
        <div id="oli-message">
        </div>        
        <!-- END: MESSAGE -->
      
        <!-- BEGIN: BREADCRUMBS -->
        <div id="oli-breadcrumbs">
          <!-- INNER: BREADCRUMBS -->
          <span>
            <a href="#" class="node">Course</a> 
            <a href="#" class="node">Sequence</a> 
            <a href="#" class="node">Unit</a> 
            <a href="#" class="node">Module</a>
          </span>
        </div>
        <!-- END: BREADCRUMBS -->
      
        <!-- BEGIN: CONTENT -->
        <div id="oli-contentwrap">
          <div id="oli-content">
            <!-- INNER: CONTENT -->
            <h1>Sample Title</h1>
            <p>Sample Paragraph</p>
          </div>
        </div>
        <!-- END: CONTENT -->
      
        <!-- BEGIN: USER3 -->
        <div id="oli-user3wrap">
          <div id="oli-user3">
            <!-- INNER: USER3 -->
            <div class="moduletable">
              <!-- INNER: USER3 BLOCK 1 -->
            </div>
            <div class="moduletable">
              <!-- INNER: USER3 BLOCK n -->
            </div>
          </div>
        </div>
        <!-- END: USER3 -->
      </div>

    </div>
  
    <!-- BEGIN: LEFT -->
    <div id="oli-leftwrap">
      <div id="oli-left">
        <!-- INNER: LEFT -->
        <div class="moduletable">
          <!-- INNER: LEFT BLOCK 1 -->          
        </div>
        <div class="moduletable">
          <!-- INNER: LEFT BLOCK n -->          
        </div>
      </div>
    </div>
    <!-- END: LEFT -->
  </div>
  <!-- END: WRAP CONTAINER + LEFT -->

  <!-- BEGIN: USER4 -->
  <div id="oli-user4wrap">
    <div id="oli-user4">
      <!-- INNER: USER4 -->
    </div>
  </div>
  <!-- END: USER4 -->

  <!-- BEGIN: FOOTER -->
  <div id="oli-footerwrap">
    <div id="oli-footer" class="clearfix">        
      <!-- INNER: FOOTER -->
      <div class="moduletable">
        <!-- INNER: FOOTER BLOCK 1 -->          
        <div class="olilogo"> <img src="/branding/images/logos/oli_logo_stacked_color_blue-transp_300x95.gif" alt="Open Learning Initiative" /> </div>
        <div class="cmu"><a href="http://www.cmu.edu/" class="logo">Carnegie Mellon University</a>
          <div class="address">5000 Forbes Avenue | Pittsburgh, Pennsylvania 15213</div>
        </div>
        <div class="creativecommons"> <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/"> This work is licensed under <span>Creative Commons Attribution -        Noncommercial-Share Alike 3.0 License</span> </a> </div>
        <div class="hewlett"> <a href="http://www.hewlett.org/"> Funded in part by <span class="logo">The William and Flora Hewlett Foundation</span> </a> </div>
        <div class="donate"> <a href="/joomla/donate"> Make a Donation </a> </div>
      </div>
      <div class="moduletable">
        <!-- INNER: FOOTER BLOCK n -->          
        <div class="oli-cert"> <a href="http://jigsaw.w3.org/css-validator/validator?uri=(sending_url_here)" target="_blank" title="CSS Validity" style="text-decoration: none;"> <img src="/branding/images/but-css.gif" border="none" alt="CSS Validity" /> </a> <a href="http://validator.w3.org/check/referer" target="_blank" title="XHTML Validity" style="text-decoration: none;"> <img src="/branding/images/but-xhtml10.gif" border="none" alt="XHTML Validity" /> </a> </div>
      </div>
    </div>
  </div>
  <!-- END: FOOTER -->
</div>

<!-- BEGIN: DEBUG -->
<div id="debug">
  <!-- INNER: DEBUG -->
</div>
<!-- END: DEBUG -->
</body>
</html>