Clearfix not working..

B3

unread,

Jun 11, 2009, 6:11:19 PM6/11/09

to Blueprint CSS

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>


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

</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;}

B3

unread,

Jun 12, 2009, 4:27:41 AM6/12/09

to Blueprint CSS

does any1 have any kind of fix?

Christian Montoya

unread,

Jun 12, 2009, 11:26:56 AM6/12/09

to bluepr...@googlegroups.com

> On Jun 11, 3:11 pm, B3 <bthree...@gmail.com> 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??

What browser(s) is it not working in?

--
--
Christian Montoya
mappdev.com :: christianmontoya.net

speedunk

unread,

Jun 12, 2009, 11:39:37 AM6/12/09

to Blueprint CSS

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

bthr...@gmail.com

unread,

Jun 12, 2009, 12:49:38 PM6/12/09

to bluepr...@googlegroups.com

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!

Christian Montoya

unread,

Jun 12, 2009, 12:58:00 PM6/12/09

to bluepr...@googlegroups.com

2009/6/12 <bthr...@gmail.com>:

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

Yeah, FYI, you should never have to use .clearfix on containers or
columns, because containers already have the same CSS as .clearfix and
columns are not meant to have it.

bthr...@gmail.com

unread,

Jun 12, 2009, 1:01:15 PM6/12/09

to bluepr...@googlegroups.com

Thanks! Something else I've been trying to understand is borders.. I'm
not sure I'm doing it the right way but I posted about it here for
more info http://groups.google.com/group/blueprintcss/browse_thread/thread/e9370a17063d0c98

Reply all

Reply to author

Forward