CSS floating (can't get clearfix to work)

Question

I can usually fix all floating-related issues by using a clearfix style, but I can't get this one to work. I have tried adding a clearfix style to the right column. I'd rather not use a separate clearfix div.

The screenshot below should illustrate the problem:

http://min.us/leRsoGVqAQtbJ

HTML:

<div class="two-thirds left">

    <!-- Quotes -->
    <div class="notepad">
        <p class="quote">“I have worked [...]</p>
        <span class="who">- Clara Craftsman [...]</span>
    </div><!-- .notebook -->

</div><!-- .two-thirds -->

<div class="one-third right clearfix">
    p>This should be floating to the right of the notepad, but the Work Experience heading should be below.</p>
</div>

CSS:

/* Floates*/
.left { float:left; }
.right { float:right; }

/* Quotes */
.notepad,
.quote,
.who {
    display:block; 
    font-family:"Neucha",cursive;
    font-size:16px;
}
.notepad { 
    width:409px;
    padding-top:25px;
    margin-left:30px;
    background:url(../img/misc/notepad/notepad-top-big.png) no-repeat; 
}
.quote {
    width:315px; /* 409px total */
    padding:0 28px 24px 66px;
    background:url(../img/misc/notepad/notepad-middle-big.png) repeat-y;
}
.who { 
    width:315px; /* 409px total */
    padding:0 28px 48px 66px;
    background:url(../img/misc/notepad/notepad-bottom-big.png) no-repeat;
    text-align:right;
    font-style:italic;
    margin-top:-24px;
}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

you could try `.left, .right { overflow: hidden; }` in your css — Sean, Jan 04 '13 at 10:00
providing you never want content to appear outside normal boundaries, that should provide a fix to the problem that adds the least HTML+CSS (that I can see anyway) — Sean, Jan 04 '13 at 10:01
I also can't see the clearfix you've tried adding to the right column — Sean, Jan 04 '13 at 10:02
If you're problem is _"can't get clearfix to work"_, you should also provide your code for `clearfix`. — Ayman Safadi, Jan 04 '13 at 10:03
Also, `clearfix` should be applied to the parent of the floating elements, not the floating elements themselves. — Ayman Safadi, Jan 04 '13 at 10:04
I have edited my post; adding the clearfix style to the right column and the clearfix CSS code. — transbetacism, Jan 04 '13 at 10:08

score 3 · Answer 1 · answered Jan 04 '13 at 10:26

You cannot apply a float and clearfix to the same element.

From Here,

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow.

You should apply the clearfix like this :

<div class="clearfix">
    <div class="one-third right">
        <p>This should be floating...</p>
    </div>
</div>

Shiridish · Answer 2 · 2013-01-04T10:33:54.940

2

Here is a solution that doesn't use floats but inline-blocks instead. See if this is what you are looking for-

DEMO

Modified css-

#wrapper 
{
   min-width:700px; 
}
.left,.right { display:inline-block; }
.left
{
    width:70%;
    min-width:420px;
}
.right
 {
    width:28%;
    min-width:170px;
 }

edited Jan 04 '13 at 10:33

answered Jan 04 '13 at 10:24

Shiridish

4,942
5
33
64

Well for the older versions of IE. But floats are removed from the normal flow of document. Here's also a good article on why inline-blocks should be used over floats- [Inline-blocks over floats](http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/) – Shiridish Jan 04 '13 at 10:37
1

Thanks for the tip and for the article. I really like the idea, but I can't get the font-size zero fix to work so I have a few pixels in between .left and .rigth (one or two spaces I guess...). I could work around this by using 26px margin instead of 30px (or by using the comment fix), but I rather not since I'm creating a theme for hundreds of people to use. I could use these workarounds for a personal project, but i suspect a lot customers will have problems with this - leading to many support tickets for me... – transbetacism Jan 04 '13 at 11:26
1

+1 for what I would recommend. [**IE7 usage is less than 1%**](http://gs.statcounter.com/#browser_version-ww-monthly-201210-201212-bar) so unless it's an internal site that has to work on IE7 I would use `inline-block`. Anyway you can always force IE7 to use `inline-block` if you really want - http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6 – andyb Jan 04 '13 at 13:34

CSS floating (can't get clearfix to work)

2 Answers2