CSS Layout Trouble

Question

Here is a
problem child I am working on.
I have tried different orders with the divs and clears, etc,
but i cannot get the main content div to stick to the top.
Attached is the style sheet.

Answer 1

Set the margin-top to 0
Gary
"OlDirty" <[email protected]> wrote in message
news:[email protected]...
>
http://php.wmsgroup.com/eofd6.org/education.html
>
> I have tried different orders with the divs and clears,
etc, but i cannot
> get
> the main content div to stick to the top.
>
> Attached is the style sheet.
>
> /* Top Elements */
> * {
> margin: 0px;
> padding: 0px;
> }
> body {
> font: 12px/1.5em Arial, Helvetica, sans-serif;
> color: #FFFFFF;
> background: #FFFFFF;
> text-align: left;
> }
>
> /* links */
> a, a:visited {
> color: #999999;
> background: inherit;
> text-decoration: none;
> }
> a:hover {
> color: #333333;
> background: inherit;
> padding-bottom: 0;
> text-decoration: underline;
> }
> a.gallery, a.gallery:visited {
> color: #FFFFFF;
> text-decoration: underline;
> }
> a.gallery:hover {
> color: #FFFFFF;
> text-decoration: none;
>
> /* headers */
> }
> #volunteer h1 {
> font: normal 18px Georgia, "Times New Roman", Times,
serif;
> color: #660000;
> padding-bottom: 10px;
> }
> #content h1 {
> font: normal 22px Georgia, "Times New Roman", Times,
serif;
> color: #650000;
> padding-bottom: 10px;
> }
> #gallery h1 {
> display: block;
> color: #FFFFFF;
> letter-spacing: -1px;
> padding-bottom: 10px;
> font: normal 20px Georgia, "Times New Roman", Times,
serif;
> }
> h2 {
> font: normal 18px Georgia, "Times New Roman", Times,
serif;
> padding-bottom: 6px;
> border-bottom: 1px solid #999999;
> width: 300px;
>
> /* images */
> }
> .floatright {
> float: right;
> margin: 8px;
> border: 1px solid #CCCCCC;
> background: #EFEFEF;
> padding: 10px;
>
> /* form elements */
> }
> form {
> margin:10px; padding: 0 5px;
> background: #F5F5F5;
> }
> label {
> display:block;
> font-weight:bold;
> margin:5px 0;
> }
> input {
> padding:2px;
> border:1px solid #eee;
> font: normal 1em Verdana, sans-serif;
> color:#777;
> }
> textarea {
> width:400px;
> padding:2px;
> font: normal 1em Verdana, sans-serif;
> border:1px solid #eee;
> height:100px;
> display:block;
> color:#777;
> }
> input.button {
> font: bold 12px Arial, Sans-serif;
> height: 24px;
> margin: 0;
> padding: 2px 3px;
> color: #333;
> background: #e7e6e6 url(button.jpg) repeat-x;
> border: 1px solid #dadada;
> }
>
> /* search form */
> .searchform {
> background-color: transparent;
> border: none;
> margin: 0 5px 0 10px; padding: 5px 0 15px 0;
> width: 190px;
> }
> .searchform p { margin: 0; padding: 0; }
> .searchform input.textbox {
> width: 100px;
> color: #777;
> height: 18px;
> padding: 2px;
> border: 1px solid #E5E5E5;
> vertical-align: top;
> }
> .searchform input.button {
> width: 60px;
> height: 24px;
> padding: 2px 5px;
> vertical-align: top;
> }
>
> /********************************************
> LAYOUT
> ********************************************/
> #wrapper {
> margin: 20px auto 0px;
> width: 980px;
> position: relative;
>
> }
> #logo {
> float: left;
> height: 192px;
> width: 234px;
> position: relative;
> }
> #header {
> float: left;
> height: 192px;
> width: 745px;
> position: relative;
> }
> #content {
> float: left;
> width: 691px;
> position: relative;
> background: #FFFFFF url(images/content.jpg) no-repeat;
> color: #333333;
> padding: 150px 30px 20px 22px;
> }
> #gallery {
> float: left;
> height: 200px;
> width: 116px;
> position: relative;
> background: url(images/photogallery.jpg) no-repeat;
> padding-top: 72px;
> padding-left: 12px;
> padding-right: 10px;
> }
> #training_photo {
> float: left;
> height: 197px;
> width: 234px;
> background: url(images/training_photo.jpg) no-repeat;
> position: relative;
> clear: both;
> }
> #volunteer {
> float: left;
> height: 170px;
> width: 214px;
> position: relative;
> background: url(images/volunteer.jpg) no-repeat;
> padding-top: 27px;
> padding-left: 20px;
> color: #333333;
> }
> #firetruck {
> float: left;
> height: 197px;
> width: 266px;
> position: relative;
> }
> #training {
> float: left;
> height: 197px;
> width: 245px;
> position: relative;
> }
>
> /* Navigation */
> #nav {
> float: left;
> height: 272px;
> width: 234px;
> position: relative;
> background: #333333;
> }
> #nav ul {
> float: left;
> list-style: none;
> width: 234px;
> padding: 0;
> height: 40px;
> display: inline;
> text-transform: uppercase;
> margin: 0 0 0 0px;
> }
> #nav ul li {
> display: inline;
> margin: 0;
> padding: 0;
> }
> #nav ul li a {
> display: block;
> float: left;
> width: 214px;
> color: #999999;
> text-transform: capitalize;
> text-decoration: none;
> font: normal 13px/38px Georgia, "Times New Roman",
Times, serif;
> margin: 0;
> padding-left: 20px;
> border-bottom: 1px solid #666666;
> }
> #nav ul li a:hover,
> #nav ul li a:active {
> color: #FFFFFF;
> }
> #nav ul li#current a {
> background: #DBDBDB url(nav-current.jpg) repeat-x;
>
> /* footer */
> }
> #footer {
> float: left;
> height: 50px;
> width: 980px;
> position: relative;
> text-align: right;
> margin: 0px;
> padding: 0px;
> color: #333333;
> font: 11px/1.5em Georgia, "Times New Roman", Times,
serif;
>