468,738 Members | 1,760 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,738 developers. It's quick & easy.

Calculating percentage widths

As a regular ciwas reader, I learned that fixed-pixel designs are evil, so
for the newly created site http://www.ddc-deutsch.de (in German, still very
much under construction) I arranged the content (left) and the menu (right)
(ideas stolen from bluerobot.com) using percentage widths (75% content, 25%
menu). This looks nice in Opera 7.11 but in IE 6, content and menu are
overlapping.
When reading the following, please keep in mind, that I'm a CSS newbie:
Am I right in guessing that to the widths (75%/25%) are added padding and
margin too, and that I really should use something else (smaller widths) to
prevent it from adding up to more than 100%? If so, how can I do this? If I
specify margin and padding in em, I cannot know how many percent of the
user's screen (silently ignoring Braille readers, speech browsers etc) 1 em
actually is, so I have no possibility to specify padding, margin etc (at
least not using em, maybe specifying in percent would do the trick).
Concerning IE: Does the above mentioned behaviour (overlap) have anything
to do with the broken box model of IE? If so, do I have to apply the
Tantek-Celik-hack somewhere?

Apart from those questions, all comments on the site are of course welcome!

Regards

Lars
Jul 20 '05 #1
3 6385
In article <op**************@news.cis.dfn.de> in
comp.infosystems.www.authoring.stylesheets, Lars G. Svensson
<sv******@dbf.ddb.de> wrote:
As a regular ciwas reader, I learned that fixed-pixel designs are evil, so
for the newly created site http://www.ddc-deutsch.de (in German, still very
much under construction) I arranged the content (left) and the menu (right)
(ideas stolen from bluerobot.com) using percentage widths (75% content, 25%
menu).
Good for you! Once you've gone through the learning curve, I think
you'll be happy at how much easier it is to make changes.
This looks nice in Opera 7.11 but in IE 6, content and menu are
overlapping.
It looks fine in Mozilla 1.4 also. However, there seems to be rather
a lot of white space to the right of the menu, almost equal to the
width of "Literatur".

Often the answer is "quirks mode", but your DOCTYPE seems fine. One
of your countrymen has a fine writeup of DOCTYPE switching at (in
English) at
<http://gutfeldt.ch/matthias/articles/doctypeswitch.html>.

I am not certain about this, but I think MSIE has a bug affecting
widths because it doesn't account for the width of the scroll bar,
or something like that. I could be wrong here, but I think I
remember reading that you can specify
body { width:100% }
and that fixes it. Somebody else will correct me if I'm wrong, I
hope!

However, I think maybe you don't really want to use percent for all
widths anyway. Please read on:
When reading the following, please keep in mind, that I'm a CSS newbie:
Am I right in guessing that to the widths (75%/25%) are added padding and
margin too, and that I really should use something else (smaller widths) to
prevent it from adding up to more than 100%?
Yes. The width "property specifies the content width of boxes
generated by block-level and replaced elements."
http://www.w3.org/TR/REC-CSS2/visude...#propdef-width

And at
http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions
you can see an illustration showing that padding, border, and
margins are added to the content-width to get the full width of the
box.
If so, how can I do this?


A couple of ways.

(1) Specify everything in em, _except_ specify "width:auto" for the
content box. That actually makes sense. You (probably) want your
menu to be wide enough to contain the menu items, which might be
more or less than 25% of the window width.(*) The content could then
expand or contract to fill the remaining space. If you wanted to
accommodate very wide screens, you could specify a max-width in em
for the content; otherwise "width:auto".

(*) You might want to specify your menu with "display:none"
in your print stylesheet.

(2) Specify everything in %. The % all relate to the width of the
containing box, so if your menu width + padding + margins plus
content width + padding + margins all add up to 100% you should be
fine. (As I said, I think you run up against an MSIE bug here.)

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #2
In article <MP************************@news.odyssey.net> in
comp.infosystems.www.authoring.stylesheets, I wrote:
One of your countrymen has a fine writeup of DOCTYPE switching (in
English) at
<http://gutfeldt.ch/matthias/articles/doctypeswitch.html>.


Oops! MG and the OP might in fact _be_ countrymen, but your servers
are not. Last time I checked, Switzerland and Germany were separate
countries. :-)

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #3
On Thu, 3 Jul 2003 09:57:39 -0400, Stan Brown <th************@fastmail.fm>
wrote:
In article <MP************************@news.odyssey.net> in
comp.infosystems.www.authoring.stylesheets, I wrote:
One of your countrymen has a fine writeup of DOCTYPE switching (in
English) at <http://gutfeldt.ch/matthias/articles/doctypeswitch.html>.


Oops! MG and the OP might in fact _be_ countrymen, but your servers are
not. Last time I checked, Switzerland and Germany were separate
countries. :-)

True, esepcially considering that I only _live_ in Germany but still am a
Swedish citizen...
Thanks a lot for your help!

Lars
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

lee123
4 posts views Thread by lee123 | last post: by
1 post views Thread by zufie | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
xarzu
2 posts views Thread by xarzu | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.