fmz 14

This is embarrassing because it seems like it the fix should be so obvious, but a solution is more important than my pride.

I have a page with image and text links to forms on it. They are lining up correctly on the horizontal but there is simply way too much space between the two sets of form links.

The page validates and I have used firebug to review everything, but I can't see what is pushing the second set of content down so far.

Here is my styling:

body#forms-2 div.forms  { height: 700px;  } 
.form-box               { float: left; width: 180px; height: 190px; margin-right: 20px; } 
.form-box img.forms     { margin: 5px 0 0 30px; }
.form-box p             { margin: 0; padding: 0; width: 178px; height: 15px; text-align: center; }
.more                   { clear: both; height: 5px; }

I have the .more in there to clear the floats of the first row of content.

Any assistance will be greatly appreciated.

Thanks.

2 answers

1
point
This was chosen as the best answer

.more is clearing the floated left column, because #content is neither floated, nor width constrained, so the sidebars floats just push things out of the way - float the center or use margins/widths to constrain it so the sidebars don't influence the content.

Answered over 6 years ago by Tony Crockford
  • The minute I floated div.forms the gap filled in. The rest is tweaks. Thank you both for the feedback. fmz over 6 years ago
1
point

Floats can get pretty confusing for me. It looks like your container, div.forms, is pushing the second row down to its bottom, as if that container has a float that .more is trying to clear. Using Firebug, I added float:left to div.forms, and added clear:both to your h2 CSS, and it seemed to do the trick. But to be fair, I'm not entirely sure why. I do know that this eliminates the need for that .more clearing div. What do you think? I mean, it does the trick but I'm curious if others have a better explanation.

Answered over 6 years ago by Ben Saufley
  • The minute I floated div.forms the gap filled in. The rest is tweaks. Thank you both for the feedback. fmz over 6 years ago