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 --~--~---------~--~----~------------~-------~--~----~ -- 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] -~----------~----~----~----~------~----~------~--~---
