473,320 Members | 1,868 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 6573
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: jonm4102 | last post by:
I'm trying to calculate the median of some numerical data. The data can only be found in a query (henceforth query 1) field I previously made, and I would prefer to calculate the median in a new...
1
by: josecruz | last post by:
I have created a main report, which is controlled with a date range parameter from the main form. The report has several sub reports, which perform calculations (counts and averages at the subreport...
5
by: eliana82 | last post by:
I have problems calculating score percentages within groups. I have created a boat program in access where the information provided is name, team, boat and score. The first query I've done is...
5
by: Aswanth | last post by:
I'm Using Asp.Net with C# & Working with SSRS 2005 for Generating Reports.. The Following Expression I'm using in Reports to Show the Percentage of Particular Items in REPORT.. ...
4
by: zoeb | last post by:
Hi. I have a form which the user enters 2 years worth of data into (one record per year). The aim, is to populate the table this form is based on with 3 more years worth of data (i.e. creating 3...
4
lee123
by: lee123 | last post by:
hello it's me again; i am having a problem with calculating some totals in my project. I have fields on my form that need to be calculated to get a percentage in the end I wish i could show you...
1
by: zufie | last post by:
I have used Sum(Abs()) to convert my neg. (-) values to pos. (+) values how can I obtain the correct percentage. For example, here is my expression from my query trying to calculate the correct...
4
by: sureshl | last post by:
function cal() { var f = document.form1; var regExp_Count = new RegExp("^+$"); f.price1.value = parseFloat(f.baseprice.value*(f.percen.value/100)).toFixed(0); } cal() functions , will...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.