title: What is the right way to structure HTML and CSS?
body: <p>So, I'm a script monkey at the core. Lately I seem to get stuffed into doing design too for some odd reason and, well, let's just say I should probably have studied better.</p>
  
  <p>Either way - What I ask is, what's the Right way to structure a website?</p>
  
  <p>This one has a header with links, then a block with tabs, right under another block which consists of two parts and under those a few others who I'm not at yet.</p>
  
  <p>However, the thing is, I need to make a block that consists of two parts that are in the same box but structured independently.</p>
  
  <p>I'll try to draw it up.</p>
  
  <pre><code>Browser window..................-[]X
  ------------------------------------
  |.................Header Links Here|
  ||Tab|Tab|Tab|_____________........|
  ||Tab content.............|Small...|
  ||........................|Section.|
  ||---Line signing new section------|
  ||........................|Another.|
  ||..Content Area..........|Small...|
  ||........................|Section.|
  ------------------------------------
  </code></pre>
  
  <p>My issue is in the division of small sections and tab/content areas.</p>
  
  <p>I tried using floats, making them as tables, aligning and whatnot.</p>
  
  <p>The putting float:left on both tables worked. Kinda. Until I tried to resize the window.</p>
  
  <p>So, how do you PROPERLY structure a site like this? three divs and tables? Something else?</p>
  
  <p>I'll clarify this again: It's the Code to use to create the look above that I'm trying to figure out the proper way to do, not the <em>design</em></p>
  
  <p>As requested here's the current structure I have</p>
  
  <pre><code>&lt;div class="container"&gt;
              &lt;div class="topBlock"&gt;
  //Header Links Here            &lt;/div&gt;
              &lt;div class="inputBlock"&gt;
                  &lt;ul id="tabs"&gt;
                      &lt;li&gt;&lt;a href="#strict"&gt;Strict&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#flex"&gt;Flex&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#multiStep"&gt;Multi-Step&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div id="strict" class="tabContent"&gt;
                      &lt;table class="tableLeft"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;From&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;input id="inputBlockFrom" type="text" placeholder="FROM"/&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;To&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;input id="inputBlockTo" type="text" placeholder="TO"/&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
  
                          &lt;table class="tableRight"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Leave&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;input id="inputBlockLeave" type="text" name="leave" placeholder="LEAVE"/&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;input id="inputBlockOne" type="radio" name="one"/&gt;&lt;/td&gt;
                              &lt;td&gt;One&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Return&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;input id="inputBlockReturn" type="text" name="return" placeholder="RETURN"/&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;input id="inputBlockBut" type="radio" name="one" checked/&gt;&lt;/td&gt;
                              &lt;td&gt;Return&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;input id="inputBlockSubmit" type="submit" value="Search"/&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
                  &lt;div id="flex" class="tabContent"&gt;
                      Test Two
                  &lt;/div&gt;
                  &lt;div id="multiStep" class="tabContent"&gt;
                      Test Three
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="mapBlock tabContent"&gt;
                  &lt;table class="tableLeft"&gt;
                      &lt;tr&gt;&lt;td&gt;
                              &lt;div id="map" class="google_map"&gt;&lt;/div&gt;
                          &lt;/td&gt;&lt;/tr&gt;
                  &lt;/table&gt;
                  &lt;table class="tableRight smallTable"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Distance&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;[-------------|------------]&lt;/td&gt; //Slider to be
                      &lt;/tr&gt;
                  &lt;/table&gt;
                  &lt;table class="tableRight smallTable"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Choice / Choice&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
                  &lt;table class="tableRight"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Show:&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;input type="radio"/&gt;&lt;/td&gt;
                          &lt;td&gt;Price&lt;/td&gt;
                          &lt;td&gt;&lt;input type="radio"/&gt;&lt;/td&gt;
                          &lt;td&gt;Button!&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;input type="radio"/&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;input type="radio"/&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Sorry if it's messed up in the whitespacing somewhere..</p>
  
  <p>The CSS:</p>
  
  <pre><code>body { 
      font-size: 80%;
      font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
      background-color: #e2edff;
  }
  
  .container {
      margin: 5px 5px 5px 5px;
      padding: 5px 5px 5px 5px;
  }
  
  .pageBlock {
      /* To future me: This class is for One Full Screen ideas */
      min-height: 300px;
  }
  
  .topBlock {
      text-align: right;
      color: #000000;
  }
  
  .topBlock a {
      text-decoration: none;
      color: #000000;
  }
  
  .tableLeft {
      width: 75%;
      float: left;
      border-right: dotted 2px black;
  }
  
  .tableRight {
      float: left;
      overflow: auto;
  }
  
  .smallTable {
      border-bottom: 1px dotted #c9c3ba;
  }
  
  .google_map {
      height: 270px;
      width: 100%;
   }
  </code></pre>