DIV Background colour not showing

Hello,

Please visit the following url:
http://www.makeaquiz.net/test/new.php

On this page there is a div named 'content'.  It is centered using margin: 0 auto and it is also inside a floating 'wrapper' div.

I want the 'content' div to have a background colour of #FBFBFB, which is set in the CSS, but for some reason I can only get the background to show if it is set to FLOAT: left.

The hosted page has the 'content' div set to FLOAT: left, so that you can easily inspect the element and see the background disappearing when the float is taken away.

Please can you help me to get the background colour to show when it is centered, I've been racking my brain for a while now and can't see where I'm going wrong.

Thank you for any assistance,

Luke
LVL 2
stellaartoisAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

qwerty021600Commented:
It is showing background color : #FBFBFB;

But since this color is very very light..u cannot make out
for example, if u give it red color.. u'll see it is showing
try this and u'll get to know what i'm saying
#content {
background-color:#FF0000;;
float:left;
margin:0 auto;
text-align:left;
width:770px;
}
qwerty021600Commented:
also the lighter grey shade is visbile..
stellaartoisAuthor Commented:
Hi qwerty,

Thank you for your prompt response.

The colour only shows when the DIV is floated to the left.

I have now removed the float from the element and you can now see that the colour has disappeared.

Thanks for any more assistance,

Luke
Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

R-ByterCommented:
You dont have height defined when Your element is not floated.

You could add something like this to #content div:

min-height: 800px;
height:auto  !important;
height: 800px;

Regards
qwerty021600Commented:
give some height to content div and it'll work,...
stellaartoisAuthor Commented:
Hello,

Thank you for the information, it works when I add a height, however the AUTO height doesn't work.

Because the page is not going to be a fixed height, how do I make it so that it expands to the contents?

What is the best way to do it?

Thank you,

Luke
R-ByterCommented:
As I wrote, give it min-height. My solution is cross browser compatible.

Regards
stellaartoisAuthor Commented:
Hi R-Byter,

Thank you again, I can apply a min height, but the DIV is not expanding to the content for some reason

Thanks,

Luke
R-ByterCommented:
There is one more thing that needs to be done.
Add float: left to Your #newquiz_form just as a test, Your background is now expanded, but Your elements is in some kind of mess. So, enclose Your form in another div like this:

<div id=content>
          <div id="contentbackground">
                    <form>
                    ...
                    </form>
          </div>
</div>

And put float: left in #contentbackground. (remove float: left from #newquiz_form of course)

Regards

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
stellaartoisAuthor Commented:
Thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.