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