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), see www.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 a width and height of the div's is not enough. This could be >> a >> > problem where you are not clearing your floats properly (if you are >> using >> > float at all). >> > >> > Also, after giving us that link, make sure you clearly specify how it >> > _should_ look. >> > >> > Thanks, >> > Richard Aday >> > >> > >> > >> > >> > >> > On Tue, Jan 6, 2009 at 12:12 AM, Phill <[email protected]> wrote: >> > >> > > Thanks Jamie, Richard, >> > >> > > I will try both. That's an interesting point, that the width 100% >> > > refers to the width in relation to the size of the parent. I think my >> > > parents are all 100% however perhaps one of the parents up the chain >> > > isn't displaying properly causing the problem. >> > >> > > It may well be a lack of understanding on another component of CSS >> > > though to be perfectly honest. My layout is such that I have >> > > background declared in the <body> tag now so that this would display >> > > across the whole page. Previously my top level <div> was 100% & 100% >> > > to make the background but this would not display. >> > >> > > Inside the <body> I have a <div> which is the content which auto- >> > > centres in relation to the sides of the browser by using auto margins. >> > > The problem I now have seems to be with the components within the >> > > content <div>. I suspect this may be where my lack of understanding >> > > comes into play. I have a series of <div>s laid out within the content >> > > <div> which..... >> > >> > > Just as i've been typing this I think I have realised the problem. >> > > Will a <div> element always attempt to cover the entire width of its >> > > container - being a block level element? >> > >> > > Please forgive the psudocode - essentially my layout is: >> > >> > > <body> >> > > <content div width 750px height 100%></> >> > > <title div width 100% height 50px></> >> > > <button bar width 100% height 20px></> >> > > <MainText width 500px height 100%></> >> > > <sideBar width 180px height 100%></> >> > > </content div> >> > >> > > At the moment only the title seems to display correctly. Previously >> > > everything displayed correctly but only in IE which clearly was a >> > > problem. The title displays at 100% of the width of the content and >> > > the correct height. All other elements below that do not display as >> > > they should. >> > >> > > I have a feeling as I say the problem may be with the MainText and >> > > SideBar trying to take up less than 100% of the width of the area.. >> > >> > > Anyway your thoughts are welcome. >> > >> > > Thanks again for your help. >> > >> > > Phill >> > >> > > On 3 Jan, 20:47, "Richard Aday" <[email protected]> wrote: >> > > > Phill, >> > >> > > > When specifying a width of 100%, it does not mean that it takes as >> much >> > > > space as possible. Instead, specifying a width of 100% means that >> the >> > > width >> > > > be be EQUAL to the width of it's parent element. >> > >> > > > So what you should do is go check that it's parent elements have the >> > > desired >> > > > width. >> > >> > > > You might have to specify width: 100% all the way up to a parent >> element >> > > > that has an absolute size. If not, specify width: 100% all the way >> up to >> > > > body. >> > >> > > > Let me know if that helps, >> > > > Richard Aday >> > >> > > > On Fri, Jan 2, 2009 at 12:02 PM, Jamie C. < >> [email protected]> >> > > wrote: >> > > > > Phill, >> > >> > > > > Try adding overflow:auto to that div's style definition. If that >> > > doesent >> > > > > work you might need to post a link so we can see what's happening. >> > >> > > > > Jamie >> > >> > > > > On Wed, Dec 31, 2008 at 2:31 PM, Phill <[email protected]> >> wrote: >> > >> > > > >> Hi guys, >> > >> > > > >> I have been having a problem with my background <div> not >> displaying >> > > > >> in firefox unless I have text in it. I have seen various posts >> about >> > > > >> this on the internet but they all seem to fizzle out right before >> the >> > > > >> answer gets posted. >> > >> > > > >> Essentially everyone suggests specifying width and height >> attributes >> > > > >> and that this resolves the problem. I have already done this >> however >> > > > >> the background only displays when I specify absolute values >> rather >> > > > >> than 100%. >> > >> > > > >> The reason I specify 100% is because the content I have which >> sits >> > > > >> inside another div within this background div positions itself in >> the >> > > > >> centre of the screen by using auto margin. If I specify absolute >> > > > >> values the content centres itself absolutely as well which means >> it >> > > > >> does not move to the centre when the screen is re-sized and it is >> not >> > > > >> centred depending on the absolute values I specify. >> > >> > > > >> Does anyone know of a way I get can the <div> to display using >> 100% >> > > > >> width/height values. >> > >> > > > >> Thanks for the help >> > >> > > > >> Phill >> > >> > > > -- >> > > > -Richard Aday- Hide quoted text - >> > >> > > > - Show quoted text - >> > >> > -- >> > -Richard Aday- Hide quoted text - >> > >> > - Show quoted text - >> >> >> > > > -- > -Richard Aday > -- -Richard Aday --~--~---------~--~----~------------~-------~--~----~ -- 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] -~----------~----~----~----~------~----~------~--~---
