[Web4lib] In CSS, percentages do not seem to add up

Fri Dec 4 11:18:46 EST 2009

You'll need to get IE out of quirks mode.  I chose XHTML for this purpose, but XHTML will cause other issues you'd need to overcome (like a difference in how IE understands the box model).  A simple task isn't necessarily simple.  You might be better off using a CSS Grid, to be honest.

I'll paste my version below (my apologies if my webmail ends up mangling the HTML...Microsoft Exchange...):

********************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Title of page</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 html, body {
  padding:0px;
  margin:0px;
  border:0px;
  font:bold;
  color:white;
 }
 .main {
  position:absolute;
  padding:1%;
  margin:0px;
  border:0px;
  left:24%;
  width:74%;
  height:100%;
  background-color:#999;
 }
 .sidebar {
  position:absolute;
  left:0px;
  right:76%;
  padding:1%;
  margin:0px;
  border:0px;
  width:22%;
  height:100%;
  background-color:#66f;
 }
 .sidebar form input {
  width:80%;
 }
</style>
</head>
<body>
<div class="sidebar">
 <form id="myForm" action="" method="post">
  <p><input type="text" /></p>
  <p><input type="button" value="Submit" /></p>
 </form>
</div>
<div class="main">
 <p>This is the main body.</p>
</div>
</body>
</html>

Brendon Kozlowski
Web Administrator
Saratoga Springs Public Library
49 Henry Street
Saratoga Springs, NY, 12866
[518] 584-7860 x217

________________________________

From: web4lib-bounces at webjunction.org on behalf of John Fitzgibbon
Sent: Fri 12/4/2009 10:30 AM
To: web4lib at webjunction.org
Subject: [Web4lib] In CSS, percentages do not seem to add up

Hi,

I am attempting to construct a web page with a sidebar and a main body.

The html and body elements have no margins, paddings or borders.

The main element has a positioning of absolute. It is 24% from the left, is 74% wide, and has 1% padding on its right and left. It should be taking up 76% of the window. The margin and border are zero pixels.

The sidebar element right hand side is 76% from the right of the document. Its position is also absolute. It has a space of 24% wide to fill. It has a left and right padding of 1%. Its margin and border is zero. If I set its width to 22% there is a gap between the main element and sidebar element. If I set the sidebar's width to 24% this gap disappears. This is the case in Firefox, Opera, and IE.

What is going on? I know that the width attribute applies to the 'inside of the box'. I am assuming that the position attribute applies to the 'outside of the box'. In other words "right:76%" means that the edge of the margin is 76% of the screen's pixels away from the right hand side. It is not 76% + padding + border + margin from the right hand side.

Secondly, I have two input elements within the sidebar element. One is a text box and one a button. If I set their width to 50%, for example, some browsers interpret this to mean 20% of the document's width and some interpret it to mean 20% of the sidebar's width. Some regard the sidebar as the containing element and some do not. Is it not the case that when an element's position is absolute it is taken out of the flow of the document and is not treated as a containing element for those elements nested within it?

I have reproduced the document below. I would appreciate any assistance.

Regards,
John

John Fitzgibbon

w: www.galwaylibrary.ie
e: info at galwaylibrary.ie
p: 00 353 91 562471
f: 00 353 91 565039

*************************

<html>
<head>
<title>Title of page</title>

<style>

html, body
{
padding:0px;
margin:0px;
border:0px;
font:bold;
color:white;
}

.main
{
position:absolute;
padding:1%;
margin:0px;
border:0px;
left:24%;
width:74%;
height:100%;
background-color:#999;
}

.sidebar
{
position:absolute;
left:0px;
right:76%;
padding:1%;
margin:0px;
border:0px;
width:22%;
height:100%;
background-color:#66f;
}

.sidebar form input
{
width:80%;
}

</style>

<body>

<div class="sidebar">

<form name="myForm">
<input type="text">
<input type="button" value="Submit">

</form>
</div>

*************************
#####################################################################################
This e-mail message has been scanned for  content and cleared
by MailMarshal Hosted  at Galway County  Council

Tá an teachtaireacht ríomhphoist seo scanáilte d'Ábhar agus glanta
ag MailMarshal atá Óstálta i gComhairle Chontae na Gaillimhe.

Correspondance is welcome in Irish or in English.
Tá míle fáilte roimh chomhfhreagras i nGaeilge nó i mBéarla.

Tá eolas atá príobháideach agus rúnda sa ríomhphost seo
agus aon iatán a ghabhann leis agus is leis an duine/na daoine
sin amháin a bhfuil siad seolta chucu a bhaineann siad.
Mura seolaí thú, níl tú údaraithe an ríomhphost nó aon iatán
a ghabhann leis a léamh, a chóipáil ná a úsáid.
Má tá an ríomhphost seo faighte agat trí dhearmad,
cuir an seoltóir ar an eolas thrí aischur ríomhphoist
agus scrios ansin é le do thoil.

This e-mail and any attachment contains information which is
private and confidential and is intended for the addressee
only. If you are not an addressee, you are not authorised
to read, copy or use the e-mail or any attachment.
If you have received this e-mail in error, please notify
the sender by return e-mail and then destroy it.

If you need this email in an alternative format please contact the sender
Má tá an ríomhphost seo ag teastáil uait i bhformáid eile déan teagmháil leis an duine a sheol chugat é

#####################################################################################

To report this message as spam, offensive, or if you feel you have received this in error,
please send e-mail to abuse at sals.edu including the entire contents and subject of the message.
It will be reviewed by staff and acted upon appropriately.