[Web4lib] CSS behaviour which surprises me

Thu Jul 15 09:43:49 EDT 2010

John,

Try the overflow setting on your parent DIV.

overflow: auto; 

This forces the parent DIV to expand to fit the contents of the children DIVs.

Andrew Mutch
Library Systems Technician
Waterford Township Public Library
Waterford, MI

-----Original Message-----
From: web4lib-bounces at webjunction.org [mailto:web4lib-bounces at webjunction.org] On Behalf Of John Fitzgibbon
Sent: Thursday, July 15, 2010 9:17 AM
To: web4lib at webjunction.org
Subject: [Web4lib] CSS behaviour which surprises me

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 é

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