[Web4lib] CSS behaviour which surprises me

Thu Jul 15 09:28:02 EDT 2010

When you have floats on a box it takes it out of the normal "flow" of the layout. The floats left and right on your child elements take them out of the flow, so the height of the parent block isn't dependent on the height of the child blocks.

Have a look at this page to see some examples of how to work with floats:

http://css.maxdesign.com.au/floatutorial/

Cheers,
-Andrew

On 2010-07-15, at 9:17 AM, John Fitzgibbon wrote:

> 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 é
> 
> #####################################################################################
> 
> 
> _______________________________________________
> Web4lib mailing list
> Web4lib at webjunction.org
> http://lists.webjunction.org/web4lib/