2 replies [Last post]
dugal
dugal's picture
Offline
Enthusiast
Last seen: 13 years 43 weeks ago
Joined: 2007-08-06
Posts: 149
Points: 0

I am hot of a success of my first wholly CSS site and have begun the next makeover for my school.

I have begun coding in the same manner but want to try a different look and it's not working.

I created a container div and am putting other div's inside it to give it the look I want. It renders fine in IE7, but firefox is the problem (hmmm...)

I try and design for FF, not IE.
here is the link
http://www.fnwsu.org/sheldon/communityforest/trial/

here is the html

Sheldon Community Forest Home Page

Sheldon Community Forest

Welcome!

Welcome to the Sheldon Community Forest home page! We have lots of exciting things to tell you about and they will appear right here as soon as the committee writes a little blurb that they would like to see here!

woods picture

Sheldon Students learning in the woods.

and the CSS

body { font-size: 62.5%; text-align: center; font-family: trebuchet, verdana, serif; }

h2 {
font-size: 2.4em;
}

h3 {
font-size: 1.8em;
}

p {
font-size: 1.5em;
font-family: trebuchet, verdana, serif;
text-align: left;
margin-left: 15px;
margin-right: 15px;
}


#container {
width: 850px;
margin-left: auto;
margin-right: auto;
padding: 10px 20px;
background-color: #c4c4c4;
border: 1px solid #000;
}

#masthead {
text-align: center;
margin: 0 0 10px 0;
}

#navbar {
float: left;
background-color: white;
width: 20%;
margin-bottom: 10px;
border: 1px solid #000;
}

#contentwrap {
float: right;
background-color: white;
margin-bottom: 10px;
border: 1px solid #000;
width: 75%;
}

#footer {
clear: both;
float: right;
width: 75%;
margin: 20px auto;
background-color: white;
border: 1px solid #000;
}


#navbar ul {
text-align: left;
list-style: none;
}

thanks for any help, i'm sure it's something simple
Dugal

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You didn't enclose your

You didn't enclose your float elements.

Yeah, you used {clear: both;} on the footer, but the footer isn't in the flow either.

Do:

#container {
  overflow: hidden;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dugal
dugal's picture
Offline
Enthusiast
Last seen: 13 years 43 weeks ago
Joined: 2007-08-06
Posts: 149
Points: 0

Thank you sir, you are a

Thank you sir, you are a gentleman and a scholar.