title: CSS Wrapper / Clearfix Resolution
body: <p>Been having issues trying to get my floated elements to extend with all of my content. I've done some research but I have become officially stumped/exhausted. I've attempted a few clearfix resolutions, standard, micro, and inline, essentially everything listed in this <a href="https://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best/1633170#1633170">post</a>.</p>
  
  <p>My theories:</p>
  
  <ol>
  <li>Something wrong with my syntax, or I'm not placing the <code>&lt;div&gt;</code> in the correct place.</li>
  <li>I'm handling the content, or posts, in a fashion that will not allow me to extend the wrapper.</li>
  <li>I'm an extremely special window licker.</li>
  </ol>
  
  <hr>
  
  <h2>My Code</h2>
  
  <p><strong><em>Stylesheet:</em></strong></p>
  
  <pre><code>/*------------------------Wrapper------------------------*/
  
  html, body, #wrapper, .bar, .line, .content{
  margin: 0;
  padding: 0;
  height: 100%;
  }
  
  
  #wrapper{
  width: 100%;
  overflow: auto;
  }
  
  
  .bar{
  float: left;
  width: 5%;
  }
  
  .line{
  float: left;
  width: 1%;
  }
  
  .content{
  float:left;
  width:88%;
  }
  
  .white{
  background-color: #FFFFFF;
  }
  
  .red{
  background-color: #A80000;
  }
  
  .black{
  background-color: #000000;
  background-image:url('http://i.imgur.com/bcq2U.png');
  background-repeat:no-repeat;
  background-position:bottom right;
  background-attachment:fixed;
  }
  
  /*------------------------Navigation------------------------*/
  
  #nav{
  width: 100%;
  float: left;
  background-color: #A80000;
  border-bottom: 1px solid #C4A23E;
  }
  
  ul {
  list-style: none;
  width: 100%;
  margin: 0 auto;
  padding: 0; 
  font-family: "Arial";
  }
  
  li{
  float: left;
  }
  
  li a{
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  color: #000000;
  background-color:#A80000;
  border-right: 1px solid #C4A23E; }
  
  li a:hover{
  color: #A80000;
  background-color: #C4A23E; 
  }
  
  /*------------------------Text------------------------*/
  
  h1 {
  color: #FFFFFF;
  font-family: "Arial";
  text-alighn:center;
  }
  
  /*------------------------Boxes------------------------*/
  
  .post{
  float:left;
  display:inline;
  border-style:groove;
  border-width:2px;
  border-color:#A80000;
  background-image:url('http://i.imgur.com/kOFxo.png');
  background-repeat:no-repeat;
  background-position: top left;
  background-color:white;
  width:60%;
  margin:0px auto;
  text-align:left;
  padding:2px 5px 2px 5px;
  margin:1cm 0cm 1cm 1cm;
  }
  
  .logbox{
  float:left;
  border-style:groove;
  border-width:2px;
  border-color:#A80000;
  background-image:url('http://i.imgur.com/kOFxo.png');
  background-repeat:no-repeat;
  background-position:top left;
  background-color:white;
  margin:0px auto;
  text-align:center;
  padding:80px 80px 80px 80px;
  margin:1cm 0cm 1cm 1cm;
  }
  
  /*------------------------ClearfixA------------------------*/
  /*
  .clearfix:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
  line-height:0;
  height:0;
  }
  
  .clearfix{
  display:inline-block;
  }
  
  html[xmlns].clearfix{
  display:block;
  }
  
  *html.clearfix{
  height:1%;
  }
  */
  /*------------------------ClearfixB------------------------*/
  
  .cf:before,
  .cf:after{
  content:"";
  display:table;
  }
  
  .cf:after{
  clear:both;
  }
  
  .cf{
  zoom: 1;
  }
  </code></pre>
  
  <p><strong><em>Webpage:</em></strong></p>
  
  <pre><code>&lt;? include "config.php";
  include_once "markdown.php";
  $my_html = Markdown($my_text);
  ?&gt;
  
  &lt;!-- HTML Start --&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="styleB.css"/&gt;
  &lt;title&gt;Blog&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- Wrapper  Start --&gt;
  
  &lt;div id="wrapper"&gt;
  &lt;div class="wrapper cf"&gt;
  &lt;span class="bar white"&gt;&lt;/span&gt;
  &lt;span class="line red"&gt;&lt;/span&gt;
  &lt;span class="content black"&gt;
  
  &lt;!-- Content  Start --&gt;
  
  &lt;h1&gt;Project Hollywood&lt;/h1&gt;
  
  &lt;div id="nav"&gt;
  
  &lt;?session_start();
  if (!isset($_SESSION['username'])){?&gt;
  
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="login.php"&gt;Sign In&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;?}
  else{
  ?&gt;
  
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="admin.php"&gt;Admin Panel&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="logout.php"&gt;Sign Out&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;?}
  ?&gt;
  
  &lt;/div&gt;
  
  &lt;!-- Entries  Start --&gt;
  
  &lt;?$query= "SELECT *
  FROM entries
  ORDER BY submitted DESC";
  $result= mysql_query($query);
  $num = mysql_numrows($result);
  ?&gt;
  
  &lt;?$i=0;
  while ($i &lt; $num){
  $submit = mysql_result($result, $i, "submitted");
  $title  = mysql_result($result, $i, "title");
  $content = mysql_result($result, $i, "content");
  $userid = mysql_result($result, $i, "userid");
  $id = mysql_result($result, $i, "id");
  ?&gt;
  
  &lt;?$q = "SELECT username
  FROM users
  WHERE $userid = uid";
  $r = mysql_query($q);
  $username = mysql_result($r, 0, "username");
  ?&gt;
  
  &lt;span class="post"&gt;
  &lt;h3&gt;&lt;?=$title?&gt;&lt;/h3&gt;
  &lt;?=$submit?&gt;&lt;br/&gt;
  &lt;?=$username?&gt;
  &lt;p&gt;&lt;?=$content?&gt;&lt;/p&gt;&lt;br/&gt;
  
  &lt;?$que = "SELECT  t.tag
  FROM tags AS t
  INNER JOIN idx AS i ON t.tagid = i.tid
  INNER JOIN entries AS e ON i.eid = e.id
  WHERE e.id = '$id'";
  $res = mysql_query($que);
  $n = mysql_numrows($res);
  $x=0;
  ?&gt;
  
  Tags:
  
  &lt;?while ($x &lt; $n){
  $tag = mysql_result ($res, $x, "tag");
  $tid = mysql_result ($res, $x, "tid");
  ?&gt;
  
  &lt;a href = "tag.php?tid=&lt;?=$tag?&gt;"&gt;
  &lt;?=$tag?&gt;&lt;/a&gt;,
  
  &lt;?$x++;
  }
  ?&gt;
  
  &lt;/span&gt;
  
  &lt;?$i++;
  }
  ?&gt;
  
  &lt;!-- Entries &amp; Content End --&gt;
  
  &lt;/span&gt;
  &lt;span class="line red"&gt;&lt;/span&gt;
  &lt;span class="bar white"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Wrapper End --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;!-- HTML End --&gt;
  </code></pre>
  
  <hr>
  
  <p>Here is an image of what I am seeing on Chrome: </p>
  
  <p><img src="https://i.stack.imgur.com/pqvbX.png" alt="enter image description here"></p>
  
  <p>Any solutions, ideas, resources, help, advice would be greatly appreciated.   </p>
  
  <p>Also, I've read that FLOAT templates will be obsolete at some point in time and/or aren't the best way to design a webpage. Any suggestions or resources on how to do it otherwise would also be a welcomed response.</p>
  
  <hr>
  
  <p><strong>EDIT</strong> 4/24/13</p>
  
  <p>Adding the code I receive after viewing the page source.</p>
  
  <pre><code>&lt;!-- HTML Start --&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="styleB.css"/&gt;
  &lt;title&gt;Blog&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- Wrapper  Start --&gt;
  
  &lt;div id="wrapper"&gt;
  &lt;div class="wrapper cf"&gt;
  &lt;span class="bar white"&gt;&lt;/span&gt;
  &lt;span class="line red"&gt;&lt;/span&gt;
  &lt;span class="content black"&gt;
  
  &lt;!-- Content  Start --&gt;
  
  &lt;h1&gt;Project Hollywood&lt;/h1&gt;
  
  &lt;div id="nav"&gt;
  
  
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="login.php"&gt;Sign In&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;/div&gt;
  
  &lt;!-- Entries  Start --&gt;
  
  
  
  
  &lt;div class="post"&gt;
  &lt;h3&gt;Lorem Ipsum Contd&lt;/h3&gt;
  2013-04-22 16:01:31&lt;br/&gt;
  admin&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra sapien metus, id imperdiet erat. Cras sit amet venenatis ante. Sed velit nunc, lobortis eget facilisis vitae, eleifend non magna. Praesent mattis justo a sapien tempor hendrerit. Vestibulum commodo cursus ipsum at feugiat. Morbi porta mauris at metus tempor elementum. Nulla facilisi. Vestibulum accumsan mauris ac mauris egestas dapibus. Curabitur ultrices purus vitae tellus ullamcorper posuere.&lt;/p&gt;&lt;br/&gt;
  
  
  Tags:
  
  
  &lt;a href = "tag.php?tid=Lorem"&gt;
  Lorem&lt;/a&gt;,
  
  
  &lt;a href = "tag.php?tid=Ipsum"&gt;
  Ipsum&lt;/a&gt;,
  
  
  &lt;a href = "tag.php?tid=Lorem Ipsum"&gt;
  Lorem Ipsum&lt;/a&gt;,
  
  
  &lt;/div&gt;
  
  
  
  &lt;div class="post"&gt;
  &lt;h3&gt;Lorem Ipsum&lt;/h3&gt;
  2013-04-22 00:12:40&lt;br/&gt;
  admin&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra sapien metus, id imperdiet erat. Cras sit amet venenatis ante. Sed velit nunc, lobortis eget facilisis vitae, eleifend non magna. Praesent mattis justo a sapien tempor hendrerit. Vestibulum commodo cursus ipsum at feugiat. Morbi porta mauris at metus tempor elementum. Nulla facilisi. Vestibulum accumsan mauris ac mauris egestas dapibus. Curabitur ultrices purus vitae tellus ullamcorper posuere.&lt;/p&gt;&lt;br/&gt;
  
  
  Tags:
  
  
  &lt;a href = "tag.php?tid=Lorem"&gt;
  Lorem&lt;/a&gt;,
  
  
  &lt;a href = "tag.php?tid=Ipsum"&gt;
  Ipsum&lt;/a&gt;,
  
  
  &lt;/div&gt;
  
  
  &lt;!-- Entries &amp; Content End --&gt;
  
  &lt;/span&gt;
  &lt;span class="line red"&gt;&lt;/span&gt;
  &lt;span class="bar white"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Wrapper End --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;!-- HTML End --&gt;
  </code></pre>
  
  <p>Also a <a href="http://jsbin.com/afusob/1/edit" rel="nofollow noreferrer">JS Bin</a> replication.</p>