1

Here is my jsfiddle.

I have a container using the "clearfix" class. Within that are 3 articles, the first two are floated left at 70% width, the last is floated right at 30% width.

My expectation would be that the floated right article would fill in the open space and be aligned to the top right... but it is instead aligned alongside the last floated left article.

Is there any way to force this floated right article to align to the top, without resorting to positioning?

Thanks!

EDIT: I should elaborate that sadly I have little control over the markup in this situation... I cannot wrap the first two articles in its own container. Also, the height of each of these articles is unpredictable. If I positioned the right aligned article absolutely, and it was longer in height than the combined left aligned articles... then I would have a article element overflowing onto the footer.

.left {
    float: left;
    width: 70%;
    height: 240px;
}
.right {
    float: right;
    width: 30%;
    height: 340px;
}
.clearfix:before,
.clearfix:after,
.checkboxset:before,
.checkboxset:after {
    content: " ";
    display: table;
}
.clearfix:after,
.checkboxset:after {
    clear: both;
}
beefchimi
  • 1,308
  • 2
  • 17
  • 34
  • Why don't you just change the position in your HTML? I know you said you don't want to.. but why? – putvande Aug 14 '13 at 17:35
  • I don't want to resort to positioning because the height of all of these articles is unpredictable. If the right floated element (now positioned absolutely) is taller than the left floated elements, then it will overflow onto the footer. Perhaps I am misinterpreting your comment though... if so, could you please elaborate? Thanks. – beefchimi Aug 14 '13 at 17:40

1 Answers1

4

The thing about float is it removes the floated element from the DOM, so it doesn't know where the other elements are anymore to align itself. You need to wrap it in an unfloated div and then align that. The wrapping element needs to be "overflow: hidden" as well so it'll contain the entire floated element.

1_2_3_Reapeater
  • 266
  • 1
  • 10
  • 1
    Although I was hoping for something different, you can't argue with the facts. Thanks for confirming this for me. – beefchimi Aug 14 '13 at 18:40