Member Avatar for fuston05

I am spacing out some text in my "footer". What I am wondering is... is there a better/more efficient way to add spaces than using 35" "'s?? seems to me like there has to a better way... haha thanks in advance for your input :)

  • 5 Contributors
  • 7 Replies
  • 2K Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by fuston05

Dani AI

Generated

Using a pile of   works only on your screen size. As hinted, you are spacing chunks of content (left/middle/right), not letters, so layout CSS is the right tool. ’s absolutely positioned approach can align things, but it is brittle when text wraps or the footer’s height changes.

A simple, responsive pattern is CSS Grid. Three columns keep the center truly centered and the sides pinned to the edges, no hacks needed:

<footer class="site-footer">
  <div>&copy; 2011</div>
  <div>Design by John A. Doe</div>
  <a href="mailto:myemailaddress@yahoo.com">myemailaddress@yahoo.com</a>
</footer>

<style>
.site-footer{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1rem;
}
.site-footer > :first-child{ justify-self:start; }
.site-footer > :nth-child(2){ justify-self:center; }
.site-footer > :last-child{ justify-self:end; }
</style>

Notes:

  • Use letter-spacing or word-spacing only for typography, not layout, which echoes ’s point about using margin/padding for spacing between elements.
  • If any item can get long (like an email), let it wrap naturally; add overflow-wrap:anywhere; on the link if needed.
  • Want it to stack on very narrow screens? Add a media query that switches grid-template-columns to 1fr and centers everything.

This keeps your footer clean, accessible, and maintainable without 35 &nbsp; or absolute positioning.

Recommended Answers

All 7 Replies

Member Avatar for Arkinder

The property, margin, or padding.

Regards, Arkinder

Member Avatar for teedoff

ok wait, You are spacing each letter? or each word? or paragraph? You're not clear on that. If you have a link or your code that will help too.

Member Avatar for logoonlinepros

Yes w3c school help you tom solve out your problem and they can also help you to learn html, css, php and other language.

Member Avatar for fuston05

I appreciate all of your replies. great forum here!
I have been teaching myself for a year now html, css, php, js, mysql. and I just got signed up for an associates program in web design. I just wasn't sure of an alternative I could use in place of all these "&nbsp;" lol.
spacing the words.. its a footer and on the left i have copyright info, then in middle i have designed by "", and on right i have email. here is my code:

<div id= "footer">
				
					&nbsp;&nbsp;&nbsp;
				Copyright &#169; 2011
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				Design By John A. Doe
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				myemailaddress@yahoo.com
			</div>
Member Avatar for Borzoi

Using &nbsp; like that would only make it align correctly for the screen size you're viewing on. One thing you could do is wrap each part in it's own <p> tag and use CSS to set them all to the top of the div that they are already in then set each one's alignment.

Like this:

<div class="footer">
  <p style="position: absolute; top: 0px; width: 100%; text-align: left">&copy;Copyright 2011</p>
  <p style="position: absolute; top: 0px; width: 100%; text-align: center">Person McPerson</p>
  <p style="position: absolute; top: 0px; width: 100%; text-align: right">email@address.com</p>
</div>
Member Avatar for fuston05

hey i'll try that, tyvm for your response. much appreciated :)

Member Avatar for fuston05

worked great.. thank you all very much for your input! :)

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.