Technovantix

Layout

Container

The div that contains all the content on the page. This element contains no fixed width, and instead uses a percentage in margin to allow it to scale appropriately with browser window.

Header

The div that contains the logo. The logo is flushed to the bottom left of this element.

Navigation

The div that contains the navigation links. Navigation is setup in an unordered-list whose list elements are floated left. This is so they don't vertically stack ontop of eachother.

Content

The div that contains the main content elements #main and #sidebar. With no margin, this is the only element positioned relative to ensure consistency with the left page line.

Main

The div that contains the main content. It's floated left with a width of 360px, leaving a 40px space between this element and #sidebar.

Sidebar

The div that contains the sidebar notes. It's floated right with a width of 225, allowing the 40px space between it and #main.

CSS

body {
margin: 10px;
background-color: #D7EAF2;
}

#container {
margin: 5% 0 0;
}

#header {
width: 300px;
height: 100px;
margin: 0 0 0 115px;
}

#content {
position: relative;
top: 25px; left: 140px;
width: 625px;
}

#main {
float: left;
width: 360px;
height: 100px;
margin-bottom: 140px;
}

#sidebar {
float: right;
width: 225px;
margin-top: 20px;
margin-bottom: 140px;
}

#navigation {
margin: 0;
}

#navigation li {
float: left;
}