[Web4lib] CSS behaviour which surprises me

Thu Jul 15 09:17:23 EDT 2010

Hi,

I have created a containing div with two children divs. I have put a border around the containing div. I expected the containing div to be at least as high as its children divs but this is not the case. The lower border of the containing div cuts through the text of one of the children divs. I find this behaviour very counter intuitive. Adjusting the padding property of the containing div does not have the desired effect.

I am wondering why CSS works this way. I would appreciate any guidance on my path to enlightenment.

I have included the HTML snippet below.

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

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Full Result</title>

<style type="text/css">

div.container{
clear:both;
border:blue solid thin;
padding-bottom:1.5em;
}

div.left{
width:24%;
float:left;
}

div.right{
width:72%;
float:right;
}

</style>
</head>
<body>

<div class='container'>
<div class='left'>
This is the left
</div>
<div class='right'>
This is the right. This is the right. This is the right. This is the right. This is the right. This is the right. This is the right. This is the right. This is the right. This is the right. This is the right. This is the right. This is the right. This is the right. This is the right. This is the right. This is the right. This is the right.
</div>
</div>

<div class='container'>
<div class='left'>
This is the left repeated.
</div>
<div class='right'>
This is the right repeated.
</div>
</div>
</body>
</html>

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

Regards,
John

John Fitzgibbon

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

#####################################################################################
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.

Correspondence 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 é

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