Member Avatar for keavon

Hello. Here is my website: http://www.keavon.com/. You can view the source for code. What I need to do is lower the 'Newest Game' div down (with white/background color, not the gray) away from the top 'Who Are We?' div. Help would be appropriated! Thanks!

  • 2 Contributors
  • 3 Replies
  • 208 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by keavon

Dani AI

Generated

A short follow-up note tied to the thread: was correct to suggest adding vertical spacing, and confirmed that applying a top margin to the "Newest Game" block fixed the gap. A few extra points that often help others who land on this thread later.

Vertical spacing: use a margin on the lower sibling when the gap should reveal the page background (white). Use padding on the upper box when the gap should be part of the upper box’s background. Be aware of margin-collapsing: adjacent block-level margins can combine, so the visible space may be the larger of the two margins rather than their sum.

Floats and containment: if either div is floated or the parent is collapsing, spacing can look different. Clearing or containing floats prevents overlap and ensures margins behave predictably. A simple clearfix that works across browsers is:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Modern layout alternatives: for column stacks, a parent using flexbox or grid gives explicit control over spacing with the gap property, which avoids many margin-collapse and float issues. Example pattern:

.container { display: flex; flex-direction: column; gap: 1rem; }

Troubleshooting checklist: inspect computed margins with browser devtools, check for default margins on headings or paragraphs inside the boxes, confirm no unexpected floats are present, and avoid relying on height:100% unless parent heights are set. For consistent, scalable spacing across the site, prefer rem or em units and consider a small utility class for repeatable gaps.

Recommended Answers

All 3 Replies

Member Avatar for Dandello

Add to the css for the upper div

margin-bottom:1em;

(or whatever looks good)
or add to the css in the lower div

margin-top:1em;

Or both. That should put some white space between them.

Member Avatar for keavon

Ok, thanks!
So do I add that as

.spacer {margin-top:1em;}

and then assign that with a class or do I add that to the div's assignment like by adding this:

#newest-game {width:210px; float:left; height:100%; [B]margin-top:1em;[/B]}

?
Thanks! (I'll try both now)

Member Avatar for keavon

Nevermind, I got it, it's the second option: adding it to the div definer

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.