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

Fri Dec 4 10:30:30 EST 2009

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 é

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