0

I'm wanting to make two divs inside a container div, one floating left, and one floating right. The left div contains the news date, title and news content, the right div includes a dropdown button and box with the media relevant to the news post.

This is

The problem is that newsleft and newsright are floating and the pagecontent isn't increasing it's height with it, and I don't want to manually place the height in the CSS document :S Is there anyone that can help me out?

Thanks, o0 Will Ryan

Nix
  • 5,746
  • 4
  • 30
  • 51
user1987471
  • 1

2 Answers2

1

Floated elements are removed from the regular flow. Therefore, the parent container can't calculate the height of the content. To fix this, we need to clear the floats, which essentially means it will be put back into the flow.

Nicholas Gallagher has made a neat little clearfix trick. Basically, you simply add the class to the parent element, and all containing floats will be cleared.

http://nicolasgallagher.com/micro-clearfix-hack/

 /**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
Nix
  • 5,746
  • 4
  • 30
  • 51
0

set overflow to hidden in the containing div's style, then the container will increase its size to fit the children.

fiz
  • 564
  • 3
  • 12
  • The "overflow clear hack" sort of works, but keep in mind there's a drawback drawback. While the floats may be cleared, but overflowing content will be hidden. Also, I believe in Opera it simply hides the content entirelly, but I'm not 100% on that. – Nix Jan 23 '13 at 00:54
  • @Nix As the question does not give away to much details, I thought I go for the easiest/smallest fix. Using clearfix of course enables some fancy css like box-shadows. Never heard of this Opera behavior, and last time I check it worked? But I'll look into it next time I have opera around. – fiz Jan 23 '13 at 01:10
  • I just made a quick test, and it does indeed seem to work fine in Opera. No idea why I thought so. http://jsfiddle.net/TheNix/jqaTp/ – Nix Jan 23 '13 at 01:23
  • With this bug fix, I'm kinda hoping this is the only time I'd ever need to use this form of CSS. The problem I had was that I'm wanting a news section on my homepage, and the way I wanted it was to make whole page container, and inside that page container was a news container, which would be used multiple times, and in each news container contains the float left and float right containers haha. I dunno if that sounded like a puzzle to you guys, but that's the idea I was going for. Like I say I know how to code my own websites, it's just this little trick I was having problems with xD – user1987471 Jan 23 '13 at 03:21