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
-~----------~----~----~----~------~----~------~--~---
