Hi everyone, first off: nice site. I'm making a small website for my thesis. Here's the structure I'm going for. Maybe it will make things a little easier. I've finished it last week but I wanted to fix a terrible display error in IE. The sidebar to the right did not float to the right of the text in IE. In FF everything was dandy. Now, I've started from scratch, to try and find the error. Ironicly, now the site displays correctly in IE but not in FF. The same problem I had before. I've been busting my brains on this for two days now and I can't seem to find a solution. I've tried clearing all my floats... Nothing seems to work. Am I overlooking something here? Can you take a look? I've put the CSS inline, to make testing a little easier for you guys. Can anyone please help me? Don't worry about the footer yet, I'll fix it later on. Here's the code! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test document</title> <style type="text/css"> <!-- body { background: #97989a url("images/bannerpattern.gif") repeat-x ; margin: 0; padding: 0; } #banner { height: 100px; background: url("images/tags.gif") no-repeat; background-position: top left; padding-left: 5px; margin: 0% 15%; } #logo { margin: 21px 0px 19px 0px; height: 60px; width: 188px; float: right; background: url("images/logo.gif") no-repeat top right; } #navigation { padding: 0 15%; background-color: #FFFFFF; background-image: url("images/shadowtop.gif"); height: 25px; } #navigation ul { margin: 0; padding: 0; float: left; } #navigation ul li { list-style: none; float: left; padding: 0px 5px 0px 5px; } #navigation #caption { float: right; } .clear { clear: both; height: 0px; line-height: 0px; font-size: 0px; } #content { background-color: #FFFFFF; padding: 0% 15%; } #text { float: left; padding-left: 5px; padding-right: 250px; } #sidebar { float: right; text-align: right; } #sidebar ul { margin: 0; padding: 0; } #sidebar ul li { margin: 0; padding: 0; list-style: none; } --> </style> </head> <body> <div id="banner"> </div> <br class="clear" /> <div id="navigation"> <ul> <li>progress report</li> <li>wecompete</li> <li>about</li> </ul> <div id="caption"> unity and competition for amateur bodybuilders </div> </div> <br class="clear" /> <div id="content"> <div id="sidebar"> <ul> <li><span class="active">introduction</span></li> <li><a href="concept.html">concept</a></li> <li><a href="researchquestions.html">research questions</a></li> <li><a href="methodology.html">methodology</a></li> <li><a href="conclusion.html">conclusion</a></li> <li><a href="sources.html">sources</a></li> </ul> </div> <div id="text"> <p>Wellness, fitness, physical health ... terms that are becoming more common each day. According to current trends the gym is the place to be. Around the globe sports centres are popping up, serving the ever growing need of people to get in shape. Although fitness is the main thing nowadays, there still is a segment of people who go a step further: <strong>the amateur bodybuilders</strong>.</p> <p>Today this fairly large share of athletes is left unserved. First off, there is no way for them to <strong>compete</strong> easily on their own level. Bodybuilding competitions are only accessible to a very distinct group of athletes. Potential competitors are scared off because of the absurdly high entry fees and the extremely professional level of partaking athletes. </p> <p>Secondly there is a crucial absence of a <strong>social aspect</strong> in the sport. Interacting with others is essential in the prolonged practice of any sport. Although there is a lot of comradery between athletes in gyms, bodybuilding is a fairly self-centred sport. Goals are individual and there is no common objective. </p> <p>Because of these crucial faults in the long run most athletes give up. They turn to sports such as football and basketball in which they can interact and compete with others. They want the excitement of matches and championships to compare their skills to others and to pursue a common goal. These are all things amateur bodybuilding cannot give them. <strong>I want to fill up these voids</strong>. </p> </div> <br class="clear" /> <!--Don't worry about the footer yet... I first want to get this float lined out! Thanks!//--> </div> </body> </html> Code (markup):
You're pretty close. You just started overthinking things. Try something like this: <!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=UTF8" /> <title>Test document</title> <style type="text/css"> /*<![CDATA[*/ body { color: black; background: #97989a url("images/bannerpattern.gif") repeat-x ; margin: 0; padding: 0; font: 100% sans-serif; } p { font-size: 1em; margin: 1em 0; /*added for IE's bugginess*/ } h1 { font-size: 1.1em; margin: 0; float: right; padding-right: 5px; } #wrapper { width: 70%; margin: 0 auto; overflow: hidden; } #banner { height: 100px; background: white url("images/tags.gif") left top no-repeat; padding-left: 5px; padding-top: 1px; /*to uncollapse margin*/ } #logo { margin: 21px 0px 19px 0px; height: 60px; width: 188px; float: right; background: url("images/logo.gif") no-repeat top right; } #navigation { font-size: .9em; background: #fff url("images/shadowtop.gif"); padding: 10px 0; margin: 1em 0; overflow: hidden; } /* IE bugginess--Holly Hack*/ * html #navigation { overflow: visible; height: 1px; } #navigation ul { margin: 0; padding: 0; float: left; list-style: none; } #navigation ul li { float: left; padding: 0px 5px; border-right: 1px solid black; } #navigation li.last { border-right: 0 none; } #content { background-color: #fff; padding: 1px 10px; } #text { margin-right: 250px; } #sidebar { float: right; width: 225px; text-align: right; } #sidebar ul { margin: 1em 0; padding: 0; } #sidebar ul li { margin: 0; padding: 0; list-style: none; } #footer { text-align: center; border-top: 1px solid silver; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <div id="banner"><p>generic banner here</p></div> <div id="navigation"> <ul> <li>progress report</li> <li>wecompete</li> <li class="last">about</li> </ul> <h1>unity and competition for amateur bodybuilders</h1> </div> <div id="content"> <div id="sidebar"> <ul> <li><span class="active">introduction</span></li> <li><a href="concept.html">concept</a></li> <li><a href="researchquestions.html">research questions</a></li> <li><a href="methodology.html">methodology</a></li> <li><a href="conclusion.html">conclusion</a></li> <li><a href="sources.html">sources</a></li> </ul> </div> <div id="text"> <p>Wellness, fitness, physical health ... terms that are becoming more common each day. According to current trends the gym is the place to be. Around the globe sports centres are popping up, serving the ever growing need of people to get in shape. Although fitness is the main thing nowadays, there still is a segment of people who go a step further: <strong>the amateur bodybuilders</strong>.</p> <p>Today this fairly large share of athletes is left unserved. First off, there is no way for them to <strong>compete</strong> easily on their own level. Bodybuilding competitions are only accessible to a very distinct group of athletes. Potential competitors are scared off because of the absurdly high entry fees and the extremely professional level of partaking athletes.</p> <p>Secondly there is a crucial absence of a <strong>social aspect</strong> in the sport. Interacting with others is essential in the prolonged practice of any sport. Although there is a lot of comradery between athletes in gyms, bodybuilding is a fairly self-centred sport. Goals are individual and there is no common objective.</p> <p>Because of these crucial faults in the long run most athletes give up. They turn to sports such as football and basketball in which they can interact and compete with others. They want the excitement of matches and championships to compare their skills to others and to pursue a common goal. These are all things amateur bodybuilding cannot give them. <strong>I want to fill up these voids</strong>.</p> </div> <div id="footer"> <p>© 2006</p> <!--Don't worry about the footer yet... I first want to get this float lined out! Thanks!//--> </div><!-- end footer --> </div> </div><!-- end wrapper --> </body> </html> Code (markup): cheers, gary