Can't remove horizontal space between rows.

Between the carousel and the first three boxes, you will notice a space.  I thought it was probably a lost div, but they all matched.  I next thought that it was something to do with the container class, but that wasn't it either.  The space goes away when I remove the carousel and replace it with an image, but I cannot find what CSS is throwing it off, IF that is the problem at all.  

http://insuranceqa.illinois.gov/defaultBlue.html
smitty62Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

Chris StanyonWebDevCommented:
Looking at your code, it looks like a div containing 2 empty <p> elements that's causing your space:

<div style="background-color:#FFF"><p>&nbsp;</p><p>&nbsp;</p></div>

Open in new window

0
smitty62Author Commented:
The div style would cover the p tags, besides I already tried removing that div all together and the space was still there.
0
Julian HansenCommented:
There is a div with the class 'container rotator'

The rotator class is defined like this
div.rotator {
	padding-bottom: 1px;
	margin-bottom: 1em;  /* this is the problem */
}

Open in new window

You can either override this style (not recommended) or you can add the following to the outer div that contains it
element {
	background-color: #1f487c;
	overflow: auto; /* ADD THIS */
}

Open in new window


The overflow: auto will prevent the margin in the child rotator element extending beyond the bounds of its parent.
ss157.jpg
0

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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

smitty62Author Commented:
Thank you.  I added the overflow to the outer div and that worked.
0
Chris StanyonWebDevCommented:
Not sure what you mean by the div style covering the P tags. That doesn't make any sense. The fact is you have a <DIV> that contains 2 empty <p> tags. Each P has a line-height of 1.4xxx and a bottom margin of 10px. The P tags are giving your DIV a height that accounts for the space. Delete the DIV and it goes away.

screengrab.png
0
Julian HansenCommented:
You are welcome.
0
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.