title: CSS problem, creating tabs
body: <p>I have a CSS problem that I'm not able to figure out. I'm not even sure it is possible. What I want is the following:</p>
  
  <p>I have three buttons/tabs like this <a href="http://sv.tinypic.com/r/21cf85t/6" rel="nofollow noreferrer">http://sv.tinypic.com/r/21cf85t/6</a> and when you click one tab a different div should show for each tab like this <a href="http://sv.tinypic.com/r/21l5y85/6" rel="nofollow noreferrer">http://sv.tinypic.com/r/21l5y85/6</a> or <a href="http://sv.tinypic.com/r/2dbrv5u/6" rel="nofollow noreferrer">http://sv.tinypic.com/r/2dbrv5u/6</a>. </p>
  
  <p>I know how to show/hide the divs with jQuery but the problem is that the divs will increase in height <a href="http://sv.tinypic.com/r/k2xxfb/6" rel="nofollow noreferrer">http://sv.tinypic.com/r/k2xxfb/6</a> and then they will push the other tabs and divs down. Is there a way to create what I am trying to do?</p>
  
  <p>I'm not a guru in CSS so if you have an example to look at or can post code here I would be very very thankful!</p>
  
  <p>This is the HTML I'm using for my tabs:</p>
  
  <pre><code>&lt;div class="MainContent"&gt;Content&lt;/div&gt;
  &lt;div class="TabsHolder"&gt;
      &lt;div id="Tab1"&gt;
          &lt;div style="width:200px"&gt;
              Content Tab 1
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="Button1" href="#Tab1"&gt;&lt;/a&gt;
      &lt;div class="clearer"&gt;&lt;/div&gt;
      &lt;div id="Tab2"&gt;
          &lt;div style="width:200px"&gt;
              Content Tab 2
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="Button2" href="#Tab2"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.MainContent {
      float: left;
  }
  
  .TabsHolder 
  {
      float: left;
  }
  
  .Button1
  {
      float: left;
      margin: 100px 0px 20px 0px;
      background: url(images/Button1.png) no-repeat 0 0;
      height: 79px;
      width: 27px;
  }
  
  #Tab1
  {
      width: 200px;
      margin: 80px 0px 20px 0px; 
      border: solid 1px #ACCD45;
      position: relative;
      float: left;
      overflow: hidden;
      padding: 20px;
  }
  
  .Button2
  {
      float: left;
      margin: 0px 0px 20px 0px;
      background: url(images/Button2.png) no-repeat 0 0;
      height: 97px;
      width: 27px;
  }
  
  #Tab2
  {
      width: 200px;
      margin: 0px 0px 20px 0px;
      border: solid 1px #ACCD45;
      position: relative;
      float: left;
      overflow: hidden;
      padding: 20px;
  }
  
  div.clearer 
  {
  clear: both;
  margin: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
  line-height: 0px; 
  height: 0px;
  width: 0px;
  overflow: hidden;
  }
  </code></pre>