Aceramic
01-22-2008, 04:04 PM
Ok, this is the first time I've ever actually used floats, so maybe I'm missing something, but this is what I have so far:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>About Us</title>
<link href="styles.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
<div id="contentwrapper">
<div id="banner"><img src="images/Banner.jpg" width="556" height="120" alt="Banner Image" /></div>
<br />
<div id="navwrapper">
<a href="index.html" id="btn_home"></a>
<a href="about.html" id="btn_about"></a>
<a href="sponsors.html" id="btn_sponsors"></a>
<a href="progress.html" id="btn_progress"></a>
<a href="first.html" id="btn_first"></a>
<a href="contact.html" id="btn_contact"></a>
</div>
<div id="textarea">
-text removed-
</div>
<div id="borderleft"></div>
<div id="borderright"></div>
</div>
</body>
</html>
CSS:
/* CSS Document */
* {
padding:0px;
margin:0px;
}
body {
background-color:#000000;
font-family:"Trebuchet MS";
font-size:14px;
color:#FFFFFF;
}
img {
border:none;
}
#banner {
position:absolute;
left:12%;
top:0px;
}
#contentwrapper {
background-color:#000000;
position:absolute;
top:auto;
left:20%;
margin-left:-5%;
width:716px;
height:80%;
}
#textarea {
background-color:#000000;
position:absolute;
top:200px;
left:15%;
width:470px;
height:70%;
z-index:2;
}
#borderleft {
background-image:url(images/border-left.jpg);
background-repeat:repeat-y;
width:40px;
height:80%;
float:left;
clear:left;
position:absolute;
top:140px;
}
#borderright {
background-image:url(images/border-right.jpg);
background-repeat:repeat-y;
width:40px;
height:80%;
float:right;
float:right;
position:absolute;
top:140px;
}
The left image works fine, but the right does not display... Any ideas?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>About Us</title>
<link href="styles.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
<div id="contentwrapper">
<div id="banner"><img src="images/Banner.jpg" width="556" height="120" alt="Banner Image" /></div>
<br />
<div id="navwrapper">
<a href="index.html" id="btn_home"></a>
<a href="about.html" id="btn_about"></a>
<a href="sponsors.html" id="btn_sponsors"></a>
<a href="progress.html" id="btn_progress"></a>
<a href="first.html" id="btn_first"></a>
<a href="contact.html" id="btn_contact"></a>
</div>
<div id="textarea">
-text removed-
</div>
<div id="borderleft"></div>
<div id="borderright"></div>
</div>
</body>
</html>
CSS:
/* CSS Document */
* {
padding:0px;
margin:0px;
}
body {
background-color:#000000;
font-family:"Trebuchet MS";
font-size:14px;
color:#FFFFFF;
}
img {
border:none;
}
#banner {
position:absolute;
left:12%;
top:0px;
}
#contentwrapper {
background-color:#000000;
position:absolute;
top:auto;
left:20%;
margin-left:-5%;
width:716px;
height:80%;
}
#textarea {
background-color:#000000;
position:absolute;
top:200px;
left:15%;
width:470px;
height:70%;
z-index:2;
}
#borderleft {
background-image:url(images/border-left.jpg);
background-repeat:repeat-y;
width:40px;
height:80%;
float:left;
clear:left;
position:absolute;
top:140px;
}
#borderright {
background-image:url(images/border-right.jpg);
background-repeat:repeat-y;
width:40px;
height:80%;
float:right;
float:right;
position:absolute;
top:140px;
}
The left image works fine, but the right does not display... Any ideas?