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