Wow, that gives me something to be getting on with. Thanks for all the help there Richard. I think I may have missed a </div> out on the ButtonBar string some how, that looks okay here.
I've had a good read of the clearfix solution and it looks like it might be on the money. I'm not sure whether I quite understand it yet but i'll have a go when I get back and let you know how I get on. Thanks again for your help. Phill On 7 Jan, 10:19, "Richard Aday" <[email protected]> wrote: > Woops, sent it early. Here's the complete e-mail: > > Ok, you have a few problems. > > 1) The div's MainText and RightSideNav are INSIDE the ButtonBar. Move them > out of the div. > > So it should look like: > > > <div id="ButtonBar"><div id="PhysicalButton"><a class="c1" > > href="index.html">PHYSICAL</a></div><div id="MentalButton"><a > > class="c1" href="index.html">MENTAL</a></div><div > > id="NutritionalButton"><a class="c1" > > href="nutritionalIndex.html">NUTRITION</a></div><div > > id="RestButton"><a class="c1" href="index.html">SLEEP/RECOVERY</a></ > > div></div> > > </div> > > > <div id="MainText"> > > <h2>Header</h2> > > Some text describing the main content. > > </div> > > <div id="RightSideBar">While something is here, this bar > > displays</div> > > 2) Now, because you are floating MainText to the left and RightSideNav to > the right, you have to find a way to clear the floats. The easiest way to > do this would be to add a div right after the close tag of RightSideBar that > looks like: <div style="clear:both;"></div>. However, this is not the > correct way of doing it because it adds unneccessary markup to the page. I > recently wrote up an e-mail to another person explaining how they could fix > this issue using clearfix. Here is a copy: > > The problem you are having is that you are floating content and > > > sidebar_container, however you are not clearing them properly. > > > This article explains the problem, and has as a detailed explanation with a > > full solution towards the bottom: > >http://www.positioniseverything.net/easyclearing.html > > > You should read it to understand what you are experiencing. If you don't > > want to use IE conditional commenting, then google clearfix and find another > > solution that does not contain conditional commenting. > > > Once you put in the CSS clearfix in your CSS, then add a classname of > > clearfix to the sidebar_container. If that doesn't fix it, add the clearfix > > to content as well. > > 3) Make the width of RightSideNav bigger so that it takes up all the > horizontal space you want it too. > > 4) Now that you have 2 columns (MainText and RightSideNav), you're right > column is not extending all the way to the bottom. if you want this the > easiest way to solve this would be with Faux columns. Basically, you set a > background image to the Content div. The image would have be a width of > 750px. It would have a height of 1px. The image would have the first 500px > be the lighter green, and then the rest of the image would be the darker > green. By doing this, then your background color of the 2 columns extend > all the way to the bottom (regardless of which column is smaller). > > Good luck! > > > > On Wed, Jan 7, 2009 at 2:07 AM, Richard Aday <[email protected]> wrote: > > Ok, you have a few problems. > > > 1) The div's MainText and RightSideNav are INSIDE the Button Bar. Move > > them out of the div. > > > So it should look like: > > > On Wed, Jan 7, 2009 at 12:34 AM, Phill <[email protected]> wrote: > > >> Understood, I think you may have given me the answer in your second > >> paragraph actually. I don't think the block level elements positioned > >> side by side will position properly unless they are floated. I have > >> just floated the MainText and RightSideBar and they now look a lot > >> better in firefox. > > >> Anyway as requested here is the html: > > >> <?xml-stylesheet href="mystyles2.css" type="text/css"?> > >> <!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 name="generator" content="HTML Tidy for Linux (vers 1 September > >> 2005), seewww.w3.org" /> > >> <link rel="stylesheet" type="text/css" href="mystyles2.css" /> > >> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > >> <title>Title</title> > > >> <style type="text/css"> > >> /*<![CDATA[*/ > >> a.c1 {display:block; width: 100%; height: 100%; border: none;} > >> /*]]>*/ > >> </style> > >> </head> > >> <body> > >> <div id="Content"> > >> <div id="Title">TotusHealth.com</div> > >> <div id="ButtonBar"><div id="PhysicalButton"><a class="c1" > >> href="index.html">PHYSICAL</a></div><div id="MentalButton"><a > >> class="c1" href="index.html">MENTAL</a></div><div > >> id="NutritionalButton"><a class="c1" > >> href="nutritionalIndex.html">NUTRITION</a></div><div > >> id="RestButton"><a class="c1" href="index.html">SLEEP/RECOVERY</a></ > >> div></div> > > >> <div id="MainText"> > >> <h2>Header</h2> > >> Some text describing the main content. > >> </div> > >> <div id="RightSideBar">While something is here, this bar > >> displays</div> > >> </div> > >> </body> > >> </html> > > >> And next the mystyles2.css: > > >> body { > >> margin:0px 0px; padding:0px; > >> text-align:center; > >> background: white url('circles4CompleteMerged.gif'); > >> background-repeat: repeat; > >> } > > >> #Content { > > >> width:750px; > >> height: 100%; > > >> margin-left:auto; > >> margin-right: auto; > > >> text-align:left; > >> padding:0px; > >> border-left:5px solid #0a930a; border-right: 5px solid #0a930a; > >> border-top: none; border-bottom: none; > >> background: black; > > >> } > > >> h2 > >> { > >> margin-top: 1em; > >> font-weight: normal; > >> font-size: 150%; > >> margin-bottom: 1em; > >> margin-left: 0.5em; > >> color: #0a930a; > >> letter-spacing: 0.6em; > >> text-decoration: underline > >> } > > >> h4 > >> { > >> margin-top: auto; > >> margin-bottom: auto; > >> margin-left: auto; > >> margin-right: auto; > >> color: #0a930a; > >> } > > >> #Title { > >> width: 100%; > >> height: 90px; > >> background: #9cc79c; > >> font-size: 50pt; > >> color: white; > >> text-align: center; > >> font-family: Arial; > >> font-weight: 800; > >> } > > >> a:link {color: black; text-decoration:none;} > >> a:visited {color: black; text-decoration:none;} > >> a:hover {color: white; background-color: #80b37f; text- > >> decoration:none;} > >> a:active {color: black; text-decoration:none;} > > >> #ButtonBar{ > > >> width: 100%; > >> height: 20px; > >> /* background:#0a930a; */ > >> background: blue; > >> margin:0px 0px 0px; > >> border: 1px; > >> float: left; > >> padding:0px; > >> display: inline; > > >> } > > >> /* Colour scheme: #0a930a #eaffea */ > > >> #PhysicalButton { > >> width: 120px; > >> height: 14px; > >> margin:0px 0px 0px; > >> padding:0px; > >> font-size: 8pt; > >> display: inline; > >> text-align: center; > >> font-family: Verdana; > >> font-weight: 800; > >> color: White; > >> position: relative; top: 0px; left: 100px; > > >> background: #beeaea; > >> text-align: center; > >> float: left; > >> border: #0a930a 2px solid; > > >> } > > >> #MentalButton { > >> width: 120px; > >> height: 16px; > >> margin:0px 0px 0px; > >> padding:0px; > >> font-size: 8pt; > >> display: inline; > >> text-align: center; > >> font-family: Verdana; > >> font-weight: 800; > >> color: White; > >> position: relative; top: 0px; left: 100px; > >> border: #0a930a 2px solid; > >> background: #b8ffb8; > >> text-align: center; > >> float: left; > > >> } > > >> #NutritionalButton { > >> width: 120px; > >> height: 16px; > >> margin:0px 0px 0px; > >> padding:0px; > >> font-size: 8pt; > >> display: inline; > >> text-align: center; > >> font-family: Verdana; > >> font-weight: 800; > >> color: White; > >> position: relative; top: 0px; left: 100px; > >> border: #0a930a 2px solid; > >> background: #efb78d; > >> text-align: center; > >> float: left; > >> } > > >> #RestButton { > >> width: 120px; > >> height: 16px; > >> margin:0px 0px 0px; > >> padding:0px; > >> font-size: 8pt; > >> display: inline; > >> text-align: center; > >> font-family: Verdana; > >> font-weight: 800; > >> color: White; > >> position: relative; top: 0px; left: 100px; > >> border: #0a930a 2px solid; > >> background: #beb8ea; > >> text-align: center; > >> float: left; > > >> } > > >> #MainText { > >> width:500px; > >> height:100%; > >> margin:0px auto; > >> padding:20px; > >> text-align: left; > >> font-family: Verdana; > >> font-weight: 400; > >> font-size: 11pt; > >> display: inline; > >> background: #f1fff1; > >> float: left; > > >> } > > >> #RightSideBar{ > >> display: inline; > >> width:180px; > > >> height: 100%; > >> margin:0px auto; > >> background: #9cc79c; > >> display: inline; > >> float: right; > > >> } > > >> I think I have removed the majority of my comments, apologies if I've > >> left any in. > > >> Now i've made the change so that the elements float side by side it > >> appears to be displaying much better in firefox, however the > >> rightsidebar is still not fully showing its background colour and it > >> looks like the same goes for the content. > > >> If you want to see how I would like it to look open the page in IE and > >> this should roughly display how I want it to. > > >> Thanks for all you help guys. I'll have a crack again at rounding this > >> off this evening. > > >> Phill > > >> On 6 Jan, 16:34, "Richard Aday" <[email protected]> wrote: > >> > Phill, > > >> > Having a page where we can see the problem will make debugging faster. > >> Can > >> > you either link us to the page that is broken, or create a new test page > >> > that highlights the problem? > > >> > Giving us > > ... > > read more »- Hide quoted text - > > - Show quoted text - --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected] -~----------~----~----~----~------~----~------~--~---
