I have knocked up a prototype of a website for a squash club, it is no where near finished, but I am having a problem with a piece off CSS, which is to do with positioning.<br /><br />I currently have the site floated left, I did this by placing a wrapper div around my site and selecting the CSS to make it do this, now I have also got it positioned 800 across and when I take away the floated option it sits where I want it to sit slap bang in the middle, the problem is, is that I have a border around the site and as soon as I take off the float CSS option I lose all my lines, now I could make the other divs have a line around the edge, but I am having problems with this, any suggestions?<br /><br />The site is at <!-- m --><a class="postlink" href="http://www.lilleshallsquash.co.uk">http://www.lilleshallsquash.co.uk</a><!-- m --> <br /><!--content-->
Is this what you've got when you center the wrapper?<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->#wrapper {<br />Â Â Â Â width: 810px;<br />Â Â Â Â margin: 0 auto;<br />Â Â Â Â border: 1px solid #000000;<br />Â Â Â Â background-color: #ffffff;<br />Â Â Â Â clear: both;<br />}<!--c2--></div><!--ec2--><br /><br />If so, I can't see any reason why the border would disappear but let's make sure you're not doing it in some creative way first. <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/tongue.gif" style="vertical-align:middle" emoid="
" border="0" alt="tongue.gif" /><!--content-->
<!--quoteo(post=19405:date=Dec 13 2007, 14:45:name=Expat629)--><div class='quotetop'>QUOTE(Expat629 @ Dec 13 2007, 14:45) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->Is this what you've got when you center the wrapper?<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->#wrapper {<br />Â Â Â Â width: 810px;<br />Â Â Â Â margin: 0 auto;<br />Â Â Â Â border: 1px solid #000000;<br />Â Â Â Â background-color: #ffffff;<br />Â Â Â Â clear: both;<br />}<!--c2--></div><!--ec2--><br /><br />If so, I can't see any reason why the border would disappear but let's make sure you're not doing it in some creative way first. <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/tongue.gif" style="vertical-align:middle" emoid="" border="0" alt="tongue.gif" /><!--QuoteEnd--></div><!--QuoteEEnd--><br />This works great in IE, but for some reason the lines style="vertical-align:middle" emoid=":santa_huh:" border="0" alt="santa_huh.gif" /> The><img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->in your CSS #wrapper id take out float: left; and that should allow it to centre correctly.<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />Need to take out the float in #footer as well. The floating makes the 'clear' property of #footer not pull the #maincontent down.<br /><br />You got an excess of floats in your layout there. Floats are tricky and should be used sparsely.<!--content-->
if you combine your "margin: 0 auto;" with "text-align: centre;" in the wrapper that should help IE understand what you want it to do...but definitely be wary of using floats everywhere as they do cause problems as every float needs to be 'cleared' or else you'll get funny results in your layout.<!--content-->
<!--quoteo(post=19474:date=Dec 14 2007, 10:28:name=Eskymo)--><div class='quotetop'>QUOTE(Eskymo @ Dec 14 2007, 10:28) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->if you combine your "margin: 0 auto;" with "text-align: centre;" in the wrapper that should help IE understand what you want it to do...but definitely be wary of using floats everywhere as they do cause problems as every float needs to be 'cleared' or else you'll get funny results in your layout.<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />Thanks for that, it has been a case of an teacher passing on bad habits, I did as you suggested and works how I intended, nice one!!<!--content-->
Is this what you've got when you center the wrapper?<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->#wrapper {<br />Â Â Â Â width: 810px;<br />Â Â Â Â margin: 0 auto;<br />Â Â Â Â border: 1px solid #000000;<br />Â Â Â Â background-color: #ffffff;<br />Â Â Â Â clear: both;<br />}<!--c2--></div><!--ec2--><br /><br />If so, I can't see any reason why the border would disappear but let's make sure you're not doing it in some creative way first. <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/tongue.gif" style="vertical-align:middle" emoid="
" border="0" alt="tongue.gif" /><!--content--><!--quoteo(post=19405:date=Dec 13 2007, 14:45:name=Expat629)--><div class='quotetop'>QUOTE(Expat629 @ Dec 13 2007, 14:45) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->Is this what you've got when you center the wrapper?<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->#wrapper {<br />Â Â Â Â width: 810px;<br />Â Â Â Â margin: 0 auto;<br />Â Â Â Â border: 1px solid #000000;<br />Â Â Â Â background-color: #ffffff;<br />Â Â Â Â clear: both;<br />}<!--c2--></div><!--ec2--><br /><br />If so, I can't see any reason why the border would disappear but let's make sure you're not doing it in some creative way first. <img src="http://www.webdesignerforum.co.uk/style_emoticons/default/tongue.gif" style="vertical-align:middle" emoid="
" border="0" alt="tongue.gif" /><!--QuoteEnd--></div><!--QuoteEEnd--><br />This works great in IE, but for some reason the lines style="vertical-align:middle" emoid=":santa_huh:" border="0" alt="santa_huh.gif" /> The><img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->in your CSS #wrapper id take out float: left; and that should allow it to centre correctly.<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />Need to take out the float in #footer as well. The floating makes the 'clear' property of #footer not pull the #maincontent down.<br /><br />You got an excess of floats in your layout there. Floats are tricky and should be used sparsely.<!--content-->if you combine your "margin: 0 auto;" with "text-align: centre;" in the wrapper that should help IE understand what you want it to do...but definitely be wary of using floats everywhere as they do cause problems as every float needs to be 'cleared' or else you'll get funny results in your layout.<!--content-->
<!--quoteo(post=19474:date=Dec 14 2007, 10:28:name=Eskymo)--><div class='quotetop'>QUOTE(Eskymo @ Dec 14 2007, 10:28) <img src='http://www.webdesignerforum.co.uk/style_images/1/post_snapback.gif' alt='*' border='0' /></div><div class='quotemain'><!--quotec-->if you combine your "margin: 0 auto;" with "text-align: centre;" in the wrapper that should help IE understand what you want it to do...but definitely be wary of using floats everywhere as they do cause problems as every float needs to be 'cleared' or else you'll get funny results in your layout.<!--QuoteEnd--></div><!--QuoteEEnd--><br /><br />Thanks for that, it has been a case of an teacher passing on bad habits, I did as you suggested and works how I intended, nice one!!<!--content-->