...

View Full Version : Div float problem



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?

abduraooft
01-22-2008, 04:13 PM
Don't mix float with position:absolute;
In your case one is positioned over another.
If you choose position:absolute;, then use left: or right:, but you may have to put them inside a relatively positioned element.

PS: Assume you are talking about #borderleft and #borderright



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum