I am currently starting to use CSS and with my current site it seems everytime i resize my brower the boxes move but the text stays, its like they are not even attached! i just want it to all stick together like a normall website, any ideas people?
currently looks like this:
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}
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 }
body,td,th {
color: #000000;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #000000;
}
div {
background-color: #0099CC;
margin-bottom: 2em;
}
.navigation {
border:#000000;
border:dotted;
margin: 0px;
padding: 0px;
Position:absolute;
left: 26px;
top: 180px;
bottom: 30px;
width: 149px;
text-align:center;
height: auto;
}
.header {
border:#000000;
border:dotted;
width: 1069px;
position:absolute;
text-align:center;
right: 25px;
top: 30px;
left: 25px;
bottom: 30px;
height: 119px;
}
.content {
border:#000000;
border:dotted;
margin: 0px;
padding: 0px;
float: center;
Position:absolute;
right: 25px;
left: 202px;
top: 180px;
bottom: 30px;
width: 892px;
height:auto;
visibility: visible;
}
</style>
@charset "utf-8";
/* CSS Document */