What is the right way to structure HTML and CSS?

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.

Either way - What I ask is, what's the Right way to structure a website?

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.

However, the thing is, I need to make a block that consists of two parts that are in the same box but structured independently.

I'll try to draw it up.

Browser window..................-[]X
------------------------------------
|.................Header Links Here|
||Tab|Tab|Tab|_____________........|
||Tab content.............|Small...|
||........................|Section.|
||---Line signing new section------|
||........................|Another.|
||..Content Area..........|Small...|
||........................|Section.|
------------------------------------

My issue is in the division of small sections and tab/content areas.

I tried using floats, making them as tables, aligning and whatnot.

The putting float:left on both tables worked. Kinda. Until I tried to resize the window.

So, how do you PROPERLY structure a site like this? three divs and tables? Something else?

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 design

As requested here's the current structure I have

<div class="container">
            <div class="topBlock">
//Header Links Here            </div>
            <div class="inputBlock">
                <ul id="tabs">
                    <li><a href="#strict">Strict</a></li>
                    <li><a href="#flex">Flex</a></li>
                    <li><a href="#multiStep">Multi-Step</a></li>
                </ul>
                <div id="strict" class="tabContent">
                    <table class="tableLeft">
                        <tr>
                            <td>From</td>
                        </tr>
                        <tr>
                            <td><input id="inputBlockFrom" type="text" placeholder="FROM"/></td>
                        </tr>
                        <tr>
                            <td>To</td>
                        </tr>
                        <tr>
                            <td><input id="inputBlockTo" type="text" placeholder="TO"/></td>
                        </tr>
                    </table>

                        <table class="tableRight">
                        <tr>
                            <td>Leave</td>
                        </tr>
                        <tr>
                            <td><input id="inputBlockLeave" type="text" name="leave" placeholder="LEAVE"/></td>
                            <td><input id="inputBlockOne" type="radio" name="one"/></td>
                            <td>One</td>
                        </tr>
                        <tr>
                            <td>Re开发者_C百科turn</td>
                        </tr>
                        <tr>
                            <td><input id="inputBlockReturn" type="text" name="return" placeholder="RETURN"/></td>
                            <td><input id="inputBlockBut" type="radio" name="one" checked/></td>
                            <td>Return</td>
                        </tr>
                        <tr>
                            <td><input id="inputBlockSubmit" type="submit" value="Search"/></td>
                        </tr>
                    </table>
                </div>
                <div id="flex" class="tabContent">
                    Test Two
                </div>
                <div id="multiStep" class="tabContent">
                    Test Three
                </div>
            </div>

            <div class="mapBlock tabContent">
                <table class="tableLeft">
                    <tr><td>
                            <div id="map" class="google_map"></div>
                        </td></tr>
                </table>
                <table class="tableRight smallTable">
                    <tr>
                        <td>Distance</td>
                    </tr>
                    <tr>
                        <td>[-------------|------------]</td> //Slider to be
                    </tr>
                </table>
                <table class="tableRight smallTable">
                    <tr>
                        <td>Choice / Choice</td>
                    </tr>
                </table>
                <table class="tableRight">
                    <tr>
                        <td>Show:</td>
                    </tr>
                    <tr>
                        <td><input type="radio"/></td>
                        <td>Price</td>
                        <td><input type="radio"/></td>
                        <td>Button!</td>
                    </tr>
                    <tr>
                        <td><input type="radio"/></td>
                    </tr>
                    <tr>
                        <td><input type="radio"/></td>
                    </tr>
                </table>
            </div>
    </div>
</body>

Sorry if it's messed up in the whitespacing somewhere..

The CSS:

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%;
 }

---

Here is an example of how I would model the html.

Notes

• Tableless.
• I would make the tab action an anchor [<a>] for more flexible styling, I did not demonstrate this in an attempt to prevent bloated CSS in example.
• I would suggest looking into a CSS framework such as Foundation, Bootstrap, Gumby, 960 Grid System or Blueprint CSS Framework. They are not especially necessary in this scenario, but useful none-the-less. Frameworks are highly suggested to achieve graceful responsive layouts. Here's a post on the subject
• The #page > #content structure may be redundant in this specific example. However, I included it because this is correct if you would like to include a #sidebar as a sibling to #content, allowing for the styling of the wrapper [#page]
• IMHO the example exemplifies proper usage of IDs and Classes and element hierarchy that is conducive to very flexible styling, RE: CSS Zen Garden

---

<div class="wrapper">
    <div id="header">
        <h1>Header</h1>
    </div>
    <div id="nav">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
    </div>
    <div id="page">
        <div id="content">
            <div class="section" id="section-1">
                <div class="tabs left">
                    <ul>
                        <li>Tab 1</li>
                        <li>Tab 2</li>
                        <li>Tab 3</li>
                    </ul>
                    <div class="tab">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                    <div class="tab">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                    <div class="tab">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
                <div class="sub-sections right">
                    <div class="sub-section">
                        A section
                    </div>
                    <div class="sub-section">
                        And another
                    </div>
                    <div class="sub-section">
                        just for kicks
                    </div>
                </div>
                 <div class="clearfix"></div>
            </div>
        </div>
        <div class="section" id="section-2">
            <div class="left">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </div>
            <div class="sub-sections right">
                <div class="sub-section">
                    A section
                </div>
                <div class="sub-section">
                    And another
                </div>
                <div class="sub-section">
                    just for kicks
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

---

.wrapper {
    width:90%;
    margin:0 auto;
}

.wrapper > div {
    width:auto;   
    margin-bottom:10px;
    border-bottom:1px solid #f0f0f0;
}

.section {
    min-height:200px;
    margin-bottom:10px;
    border:1px solid #f0f0f0;
    border-bottom-width:5px;
}

.section > .left {
    width:80%;
    float:left;
}

.section > .right {
    width:20%;
    float:right;
}

.tabs ul li {
 display:inline;  
 background:#f0f0f0;
   margin-right:5px;
}

.tabs .tab {
    display:none;
}

.tabs .tab:nth-child(0n+1) {
 display:block;   
}

.section .sub-sections .sub-section {
    margin-bottom:5px;
        background:#f0f0f0;
}


/* Independently Style Sections Here */
#section-1 {border-color:red;}
#section-2 {border-color:green}



/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clearfix {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

• Extra Credit: Use CSS media queries to make the layout responsive.
• Extra Extra Credit: Translate entire layout to HTML5

---

The standard way of building pages these days is using div tags although I'd need a lot more than 3. Tables tend not to be used for layouts: they add a large amount of weight to the page.

How were you setting the widths of your floated elements? Percentages would stay consistent as a window is resized whereas pixels will remain constant.

---

First off why does that line go all the way through both sections? Odds are they will not be the same length every time. You should really split that into two different lines one for each area.

I would structure like so: (Assuming the sections are not the same size)

<div id="container">
    <ul id="Nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        ...
    </ul>
    <div id="main">
        <ul id="tab">
            <li><a href="#">Tab</a></li>
            <li><a href="#">Tab</a></li>
        </ul>
        <div id="content">
            Lorem...
            <hr />
            Lorem...
        </div>
    </div>
    <div id="side">
        Lorem...
        <hr />
        Lorem...
    </div>
</div>

Make #main and #side float left with a width in %. Do not add any margin or paddings to these or it will mess with the overall size do to the box model. If you want padding add another div inside it with the padding similar to how the #content is.

EDIT: Changed so that the sections are the same size.

<div id="container">
    <ul id="Nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        ...
    </ul>
    <div id="main">
        <ul id="tab">
            <li><a href="#">Tab</a></li>
            <li><a href="#">Tab</a></li>
        </ul>
        <div class="section">
            <div class="content">
                 Lorem...
            </div>
            <div class="side">
                Lorem...
            </div>
        </div>
        <hr />
        <div class="section">
        ...
    </div>
</div>

---

A good way to start is going throught the HTML5 Boilerplate which is, according to its creators

a base HTML/CSS/JS template for a fast, robust and future-proof site

Make sure to read the docs and also check out the video at the bottom of the page.

Good luck!