Float Center, Text Align Left

[Porter]

I'm not entirely sure I even want my footer to look like this, but I want to try it to see how it looks. I'm trying to set the each widget area to be centered on the page (there's 4 at 300px, 1200px total width), but I want the text to all align-left. What I have now:

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4 {
	width: 300px;
	float: center;
	margin: 0 auto;
	text-align: left;
}

That was my attempt to get it working, but I had no luck. I've since switched it back to just be 300px width, and float: left. Any ideas how to accomplish this?

anightinburlington.com

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Tonya]

Hi Porter,

There is no "float: center". Rather, you want to use margin to center with no float, as such:

.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .footer-widgets-4 {
     width: 300px; /* Change the width to what you want whether fixed pixels or percent */
     float: none;
     margin: 0 auto 20px; /* set however much bottom margin that you want */
}

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Porter]

Thanks for the info, I spaced on float: center haha. I've updated my code, and I'm still having no luck, widgets are just stacked vertically.

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4 {
	width: 300px;
	float: none;
	margin: 0px auto 10px;
	text-align: left;
}

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Tonya]

Hi Porter,

Correct, it centers each widget on the page. I guess I misunderstood what you are trying to achieve when you said "each widget area to be centered on the page."

What area are you wanting to center on the page?

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Porter]

Ah, my bad, let me clear it up. In thinking about it, I realize my attempt was completely off, but I'll explain my goal anyway.

I basically want the .widget-title text to be centered, and to have the links below (contained in the respective widgets) to align with the widget title text. It's essentially a text-align left for everything, but centered within the widget, rather than all the way to the left of the widget area (the 300px), as it would be with just text-align: left. Does that make sense?

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Porter]

I just realized a possible solution, though someone may come up with a better one.

Rather than have each widget area be 300px to fill the 1200px area (3 x 4 widget areas), I could instead make them smaller, and add the desired padding to position them where needed, and then align left. This way, the widget areas are "centered", and the ext is aligned left.

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Tonya]

Hey Porter,

What you are going to find when trying to center the .widget within .footer-widget-1, for example, is .widget has the same width as its parent. Therefore, you need to either define it's width and then use margin: 0 auto to center it ... or ... just add padding as you said to contain the elements within the parent.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Porter]

Got it, for the most part. As I assumed, it didn't look as great as I thought it would, but at least I was able to best the CSS and make it do what I wanted. I've got an idea on how I want to approach it now, so I'll try that next. Thanks for your help in figuring that out!

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Author]

Posts