• Status: Solved
  • Priority: Medium
  • Security: Private
  • Views: 32
  • Last Modified:

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
0
smitty62
Asked:
smitty62
  • 2
  • 2
  • 2
1 Solution
 
Chris StanyonCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
smitty62Author Commented:
Thank you.  I added the overflow to the outer div and that worked.
0
 
Chris StanyonCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now