Difference between revisions of "Team:BABS UNSW Australia/test"

Line 3: Line 3:
 
<html>
 
<html>
 
<style>
 
<style>
 +
@import "compass/css3";
 +
 
// Variabless
 
// Variabless
 
$sidebarWidth: 220px;
 
$sidebarWidth: 220px;
Line 51: Line 53:
 
.sidebar:after {
 
.sidebar:after {
 
   right: 0;
 
   right: 0;
 +
}
 +
 +
 +
 +
// Just irrelevant styling
 +
h1,
 +
h2,
 +
p {
 +
  margin: 0 0 15px 0;
 +
}
 +
h2 {
 +
  font-size: 20px;
 +
}
 +
ul {
 +
  padding-left: 20px;
 
}
 
}
  
Line 59: Line 76:
 
</div>
 
</div>
 
</head>
 
</head>
 +
<!-- This wrapper here is important -->
 
<section class="article-wrap">
 
<section class="article-wrap">
−
    <article>
+
  <article class="article-content">
−
        <p>Some content here</p>
+
    <h1>2 columns, both 100% height</h1>
−
     </article>
+
    <p>
 +
      No images, no extra elements.
 +
    </p>
 +
    <p>
 +
      The content area is fluid width, while the sidebar staying fixed width. No hacks, no bullsit just normal CSS.
 +
    </p>
 +
     <p>
 +
      The pseudo elements that make the columns 100% height are discolored a bit to illustrate how it works.
 +
    </p>
 +
    <p>
 +
      If you're not reading my blog article about this, <a href="http://clubmate.fi/100-percent-height-columns-fixed-width-sidebar-pure-css-solutions-to-commons-fluid-layout-problems">you may want to.</a>
 +
    </p>
 +
  </article>
 
</section>
 
</section>
 
<aside class="sidebar">
 
<aside class="sidebar">
−
    <h2>Sidebar</h2>
+
  <h2>Sidebar</h2>
−
    <ul>
+
  <ul>
−
        <li>Navigation</li>
+
    <li>Lorem.</li>
−
        <li>List etc.</li>
+
    <li>Natus.</li>
−
     </ul>
+
     <li>Voluptatibus.</li>
 +
    <li>Esse!</li>
 +
    <li>Laudantium.</li>
 +
  </ul>
 
</aside>
 
</aside>
−
<body>
 
−
</body>
 
−
 
 
</html>
 
</html>

Revision as of 16:13, 17 September 2015

2 columns, both 100% height

No images, no extra elements.

The content area is fluid width, while the sidebar staying fixed width. No hacks, no bullsit just normal CSS.

The pseudo elements that make the columns 100% height are discolored a bit to illustrate how it works.

If you're not reading my blog article about this, you may want to.