Float causing issues

In the interest of time I’m going to link you two pages, one with the float, one without.

My background <div> is supposed to span the height of the page… no matter how much content there is inside. With a float on the ‘main_body’ which contains the videos and content the boxes to the right are… well to the right, where they belong, but the background stops at the height of the browser (reference Gameggro)

If i remove the float from the main_body portion, then the background finally cooperates and does what it is intended, BUT then the boxes on the right no longer want to be on the right. (reference Gameggro)

How do you get the two link boxes to cooperate without floats OR how do you get the background to cooperate WITH floats?

Hi leigero. Welcome to SitePoint. :slight_smile:

This is a common issue of “containing floats”, which normally hang outside of a container unless you specify otherwise. The easiest way to specify otherwise is to add overflow: hidden; to the container:

#page {
  background-color: #AAAAAA;
  height: auto;
  margin: 0 auto -40px;
  min-height: 100%;
  padding-bottom: 1px;
  width: 940px;
  [COLOR="Red"]overflow: hidden;[/COLOR]

I did add the overflow: hidden; to #page and it didn’t seem to change anything.

you can check it on www.leigero.com/home.html its exactly as you suggested. I did that with and without the float on #main_body and it didn’t seem to have any affect, the page looks exactly as it does now.

I stand corrected I was just looking at the wrong of my two example pages -.- what I meant to say is that you’re awesome. that has created a slight issue with the bottom margin but I’m sure i can work that out much more easily and you are my hero. Thank you for the quick reply!

Glad that helped.

That should be easy to deal with. How do you want things to appear?

doing that just brought to light the fact that I hadn’t established any border or padding for the #main_page{} and therefore it ran into the footer and got all mixed up. I just tweaked that a little and VOILA! a weeks worth of stress solved in an hour and I still think you’re a hero.

Fantastic! It’s much nicer when you figure a solution yourself. If you visit here often, you’ll find there are lots of real heroes that make me look ordinary. It’s an amazing place here, so if you ever have any question at all, please pop back in. :slight_smile: