I tried placing the clearfix on the divs where it should be adn then just tried on all of them but it didn't work.. but removing the span-24 worked! On Jun 12, 2009, at 8:39 37 AM, speedunk wrote:
> > B3... > > I'm not sure what you mean by "clearfix is not working?" In the sample > code you provided the clearfix class is not even being used. > > However, I assume you are trying to get the white background of the > content div to wrap around the divs inside the content div? I would > recommend removing the span-24 class from the content div (thereby > removing the float on that div). This will allow the content div to > wrap. > > The HTML would be: > > <div id="content"> > <div class="span-17 > append-1"> > <div > id="post" > > > <h2 class="bottom">Loren Ipsum</h2> > > > <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. > Vestibulum rhoncus enim sed diam ultrices eu suscipit eros faucibus. > Vivamus quam purus, condimentum nec eleifend aliquam, dictum ac neque. > Nam aliquet varius turpis at scelerisque. Curabitur porta ullamcorper > ante, lobortis consectetur massa commodo in. Ut urna ligula, posuere > in euismod ac, gravida sed purus. Nunc ut ultrices tortor. Fusce > tempor, ipsum ut ornare malesuada, tellus ipsum tempor velit, nec > lacinia lectus turpis nec turpis. Curabitur cursus convallis ligula, > vehicula porta quam adipiscing eu.</p> > </div> > <div > id="comments"> > > <h2>Comments</h2> > </div> > </div> > <div class="span-6 > last"> > <div > id="about"> > > <h2>Loren Ipsum</h2> > > <img src="images/me.jpg" alt="me" width="190" height="144"/> > > <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. > Vestibulum rhoncus enim sed diam ultrices eu suscipit eros faucibus. > Vivamus quam purus, condimentum nec eleifend aliquam, dictum ac neque. > Nam aliquet varius turpis at scelerisque. Curabitur porta ullamcorper > ante, lobortis consectetur massa commodo in. Ut urna ligula, posuere > in euismod ac, gravida sed purus. </p> > </div> > </div> > </div> > > On Jun 11, 6:11 pm, B3 <[email protected]> wrote: >> I cant seem to get clearfix to work.. I looked at the other clearfix >> discussions but still haven't been able to figure this out..can >> anyone >> help?? >> >> here is my HTML >> >> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" >> "http://www.w3.org/TR/html4/strict.dtd";> >> >> <html lang="en"> >> <head> >> <meta http-equiv="Content-Type" content="text/html; >> charset=utf-8"> >> <title>Blueprint Sample Page</title> >> >> <!-- Framework CSS --> >> <link rel="stylesheet" href="/bcss/css/screen.css" type="text/css" >> media="screen, projection"> >> <link rel="stylesheet" href="/bcss/css/print.css" type="text/css" >> media="print"> >> <link rel="stylesheet" href="/bcss/css/style.css" type="text/css" >> media="screen, projection"> >> <!--[if lt IE 8]><link rel="stylesheet" href="/bcss/css/ie.css" >> type="text/css" media="screen, projection"><![endif]--> >> </head> >> >> <body> >> <div class="container"> >> <div id="head" class="span-24"> >> <div class="logo"> >> <h1> >> >> < >> a href="/">Site Name</a> >> </h1> >> </div> >> </div> >> <div id="infocontainer" >> class="span-24"> >> <div id="info" > >> <p >> class="bottom">Lorem ipsum dolor sit amet, consectetur >> adipiscing elit. Vestibulum rhoncus enim sed diam ultrices eu >> suscipit >> eros faucibus. Vivamus quam purus, condimentum nec eleifend aliquam, >> dictum ac neque. Nam aliquet varius turpis at scelerisque. Curabitur >> porta ullamcorper ante, lobortis consectetur massa commodo in. Ut >> urna >> ligula, posuere in euismod ac, gravida sed purus. Nunc ut ultrices >> tortor. Fusce tempor, ipsum ut ornare malesuada, tellus ipsum tempor >> velit, nec lacinia lectus turpis nec turpis. Curabitur cursus >> convallis ligula, vehicula porta quam adipiscing eu. Etiam eget velit >> justo, et egestas dui. Proin non est facilisis massa viverra pulvinar >> in at ligula.</p> >> </div> >> </div> >> <div id="content" class="span-24"> >> <div class="span-17 >> append-1"> >> >> <div id="post" > >> >> < >> h2 class="bottom">Loren Ipsum</h2> >> >> >> < >> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. >> Vestibulum rhoncus enim sed diam ultrices eu suscipit eros faucibus. >> Vivamus quam purus, condimentum nec eleifend aliquam, dictum ac >> neque. >> Nam aliquet varius turpis at scelerisque. Curabitur porta ullamcorper >> ante, lobortis consectetur massa commodo in. Ut urna ligula, posuere >> in euismod ac, gravida sed purus. Nunc ut ultrices tortor. Fusce >> tempor, ipsum ut ornare malesuada, tellus ipsum tempor velit, nec >> lacinia lectus turpis nec turpis. Curabitur cursus convallis ligula, >> vehicula porta quam adipiscing eu.</p> >> </ >> div> >> >> <div id="comments"> >> >> < >> h2>Comments</h2> >> </ >> div> >> </div> >> <div class="span-6 >> last"> >> >> <div id="about"> >> >> < >> h2>Loren Ipsum</h2> >> >> < >> img src="images/me.jpg" alt="me" width="190" height="144"/> >> >> < >> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. >> Vestibulum rhoncus enim sed diam ultrices eu suscipit eros faucibus. >> Vivamus quam purus, condimentum nec eleifend aliquam, dictum ac >> neque. >> Nam aliquet varius turpis at scelerisque. Curabitur porta ullamcorper >> ante, lobortis consectetur massa commodo in. Ut urna ligula, posuere >> in euismod ac, gravida sed purus. </p> >> </ >> div> >> </div> >> </div> >> </div> >> </body> >> </html> >> >> STYLE.CSS >> >> body { >> font-size: 75%; >> color: #222; >> background: #444; >> font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;} >> >> .center{ >> vertical-align: middle; >> text-align: center; >> } >> h1{text-indent:-9999px;} >> h2 { font-size: 1.6em;color:#777;} >> h3 { font-size:1.4em;color:#65898b;} >> h4 { font-size:1.3em;color:#777;} >> h5 {font-size:.9em;color:#747474;} >> h6 { font-weight:bold; } >> >> .container{ >> background:#fff; >> /* >> border-left: #fff solid 20px; >> border-right: #fff solid 20px; >> */ >> } >> >> #head{ >> height:100px; >> margin-bottom:10px; >> } >> >> #infocontainer{ >> background:#e4f2fd; >> margin-bottom:15px; >> } >> >> #info{ >> border:1px solid #cce6fb; >> padding:10px; >> } >> #content{ >> margin-bottom:15px; >> height:100px; >> } >> >> #footer{ >> margin-bottom:20px; >> background:#ffff00; >> height:100px; >> } >> >> #post, #about{ >> padding:20px; >> background:#fcfcfc; >> border:1px solid #f1f1f1; >> margin-bottom:15px; >> } >> >> #comments{ >> padding:20px; >> margin-bottom:15px; >> } >> >> #comments h2{color:#222;} > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Blueprint CSS" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en -~----------~----~----~----~------~----~------~--~---
