Clearfixing floats inside the container but ignoring floats outside the container?

Question

I've got the following HTML structure:

%aside.sidebar

%main

  %article
    %h2
    %aside.picture
      %img
    %p

  %article
    %h2
    %aside.picture
      %img
    %p

(If you're not familiar with HAML: the structure above represents an HTML tree. %aside.picture means <aside class='picture'>.)

The sidebar is tall and is floated to the left.

Within articles, images are also floated to the left.

I would like to clearfix articles in such a manner that each article's height grows up to the bottom of its image, but not to the bottom of the sidebar.

Please have a look at a demo: http://sassmeister.com/gist/9173268

Note that the first article's clearfix made it grow as tall as sidebar is. But i only want it to grow as tall as the image.

PS overflow: hidden does the trick, but lets assume that article contain popup elements that should be able to appear outside of their containers?

Are you opposed to having the sidebar be as tall as your main element? — cimmanon, Feb 23 '14 at 16:40
Do you want text of each article to stay on the right of image and create a column? (thus text isn't just flowing around the floating image as usual) — FelipeAls, Feb 23 '14 at 16:42

score 1 · Answer 1 · answered Feb 23 '14 at 16:26

1

Setting each article to inline-block (and giving it full width) may work:

article {
  display: inline-block;
  width: 100%;
}

http://jsfiddle.net/vKF83/

answered Feb 23 '14 at 16:26

Pixel

11
1

score 0 · Answer 2 · answered Feb 23 '14 at 16:59

Pixel's answer does work at your demo link provided: http://sassmeister.com/gist/9173268

Simply put in your Sass window the following in the article selector (without the semi-colons):

display: inline-block
width: 100%

You could also specify the height if you wanted of course within that same block:

height: 300px

Clearfixing floats inside the container but ignoring floats outside the container?

2 Answers2