Hi there,
I'm new to CSS and I am attempting to make a simple layout for a website. as it stands my left navigation bar seems to resize but the text doesnt, this just appears outside the box. Overall I would like my layout to fit the browser but at the moment everytime I resize the brower everything seems to jumble all over the place. any help would be greatly appricaited.
CODE
<style type = "text/css">
em {background-color: #0099CC;
color: white }
h1 {font-family: Verdana, Arial, Helvetica, sans-serif }
h2 {font-family: Verdana, Arial, Helvetica, sans-serif }
p {font-family: Verdana, Arial, Helvetica, sans-serif }
p {font-size: 10pt}
.style1 {color:blue}
span { color: blue;
font-size: .6em;
height: 1em }
.super { position: relative;
top: 1ex }
.sub {position: relative;
bottom: 1ex }
.shift1 {position: relative;
left: -1ex }
.shiftr {position: relative;
right: -1ex }
a:hover {text-decoration: underline;
color: blue; }
body {background-color:#83C8E2;
background-position: center
background-repeat: no-repeat;
background-attachment: fixed }
div {background-color: #FFFFFF;
margin-bottom: 2em }
.navigation {float: left; margin: 0.2em; padding: 0.2em; text-align: center; width: 15%; }
}
#links {
margin: 0px
padding: 0px
}
#links li {
line height: 1.1;
list-style-type: none;
display: block;
padding-top: 5px;
margin-bottom: 2px;
margin-left: 10px;
padding-left: 15[x;
padding-bottom: 5px;
}
div {background-color: #0099CC;
margin-bottom: 2em }
.header {
width: 100%;
position:static;
text-align:center;
}
.content {float:right; margin 0.2em; padding: 0.2em; text-align:center; width: 80%;}
}
</style>
@charset "utf-8";
/* CSS Document */