Forum Moderators: not2easy
#container {width: 80%; margin: 0 auto; border: solid #000 1px; min-width: 400px;}
#container p {text-align: center;}
#container div {height: 150px; border: solid #00f 1px;}
#container img.minwidth {width: 400px; height: 1px;}<div id="container">
<img class="minwidth" src="1x1.gif" alt="" />
<div>
<p>Some content</p>
</div>
<div>
<p>More content</p>
</div>
</div>
Given the above code, I would expect to see a centered black bordered box at 80% of the window width, containing two 150px tall blue bordered boxes with the containing text centered within them. And so I do, until the window width is reduced to less than 400px. What happens then is that the content div's dosen't respect the container div's width, they in fact respond to the window width instead.
Ok, so I move the img to the container divs. Now they stay at a minimum width of 400px when the window is reduced in size, but the container div continues to shrink! Not only that, but the centered text in the content divs doesn't center based on the div width, but again on the window width!
Adding the img to all of the divs makes them react properly, but still doesn't address the text centering. In fact even left justified text flow is based on window size, not the containing div's width.
Any solutions to this that I missed?
Note: The initial code works as expected in NS 7.1 and Opera 7.11.
When you have a div inside it and make it 400 px no matter how small the container div is, the container div is still under orders to be 80% of the window width, which I assume is what is happening. It sounds like you'd like the browser to sense your intention and counteract what you said in the css, which IE actually seems to tend to do, not in this case I guess.
The same goes for the p centering, the p box is defined by default as a box that goes to the windows edges if not stopped by a containing, parent element, that's how all block level elements work unless you tell them explicitly to be some other width.
I've seen this kind of problem with divs, especially positioned ones, and it's a major reason I don't use them as much as I'd like to. You can see this if you create a div inside another div, both with fixed widths, fill them with text to the bottom of their container, color the containers some color and the background black, then increase the text size.
All the browsers out there will handle this differently, some will cutoff the text, some will run the div into the black background. It's the same thing you're seeing, it's just a matter of how the people who write the browsers decide to deal with weird events, I don't think this is really covered in the w3c specs so it's kind of up to each browser maker to decide how they will treat this kind of event
[edited by: phoenix09 at 11:55 pm (utc) on Jan. 10, 2004]
html, body {width: 100%; height: 100%}
Which you should make a habit of - It's to do (most likely) with the inheritance chain - don't get me started on this ;) - which ultimately starts from the above "elements".
Also, note that "strict" CSS measures relative values against the viewport or (supposedly) it's parent if it has an explicit value.
There is an ongoing debate/testing going on with this here: [webmasterworld.com...]
... which may be educational or sleep-inducing ;)
(and I apologise to Suzy if she's reading - hols are over, time is short, will return to it soon though)
Anyway, I've not tested your code, just gone from what I understood of your post.
This is kind of interesting although I can't see why you are surprised by the outcome. When you set the container to be 80% size, that's 80% of the window size, that's what % refers to in CSS as far as I know when you are talking about sizing.
Of course what I'm really 'complaining' about is IE's lack of support of min-{width¦height}.
Besides, the div shouldn't be able to become smaller than the contained element.
When you have a div inside it and make it 400 px no matter how small the container div is, the container div is still under orders to be 80% of the window width, which I assume is what is happening.
The same goes for the p centering, the p box is defined by default as a box that goes to the windows edges if not stopped by a containing, parent element, that's how all block level elements work unless you tell them explicitly to be some other width.
html, body {width: 100%; height: 100%}
What I find most suprising is the text centering/flow issue. If I flow some text into a div that is a certain width, I expect the text to use the entire width of that div. Now if I set a width of 400px, the text flows just fine, but that kind of defeats the ability of doing a proper fluid design.
interesting.. but not surprising..;)
You are putting <p> text into a div that is not width specified. So you may rightly assume that your block element <p> is 100% (default) of it's parent element <div> which is 100% (default) of its parent element {<div id="container">} - the container div is set to be 80% of the root element (screen) width therefore your paragraph text is acting correctly by being 80% : translated as ~ 100% of 100% of 80% = 80%.
Your page is acting correctly in the browsers you mention because of min-width.. these browser understand and interpret the width of the container accordingly..
now using the IE image "hack" is not working the way you expect because that container div doesn't know it's actually any wider than 80% of screen width, as you explicitly declared.
The fact that it is stretching to accommodate your img (or whatever) is IE's way.. it will stretch as it doesn't understand what overflow means.. if it did render the overflow correctly what you would see is the black border shrinking (the same as your paragraph) but the image would stick out to the right as it can't be broken/wrapped.
That's why it works when you put the image inside each individual div as it is (incorrectly?) "stretching" each div
Trying to work inheritance of width on an incorrect rendering {of a "box"} will not work.. IE thinks the box is 80% wide no more no less.
Now you put a 400px wide something into another child element of the container.. are you now expecting that other children { <div p> elements in your case} should be aware of their siblings? Inheritance comes from parents not siblings.
In short the <p>'s don't know how wide the <div.minwidth> is but they do know how wide the #container is ;)
hope that helps explain it in a non-tech way ;)
Suzy
PS: TheWhippinpost ~ sleep inducing huh, you should've tried reading/research the specs in order to try and write some of it, get back there as soon as! :)
