Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by James Hollingworth
James Hollingworth
3,662 Points

Problem centering a div with floated content inside

Hi,

Can anyone help why I can't seem to centre my contact div which contains three floated CSS circles. I am not the best coder as I am learning. I am unsure what to do. I really appreciate the help.

link to my demo here http://www.jameshollingworth.com/demo.html

Thanks

7 Answers

Stone Preston
Stone Preston
42,016 Points

I think I may have discovered the problem. Your div needs to have a fixed width for the auto margins to work it seems.

<div style="width:100px; margin-left:auto margin-right:auto;"></div>

so give your contact div a fixed width and it should work

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

did you try setting the left and right margins to auto for that div? That should create equal left and right margins on the sides of your div centering it in your wrapper. I could be wrong, I just finished the CSS videos a few days ago so I am no expert.

James Hollingworth
James Hollingworth
3,662 Points
James Hollingworth
James Hollingworth
3,662 Points

I did try and it didn't work, but I will try again. I am kinda of same as you just doing the videos and figuring it out. thanks

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

I just eyeball it.

James Hollingworth
James Hollingworth
3,662 Points
James Hollingworth
James Hollingworth
3,662 Points

Might have to be the way but adjusting it allot in the media queries.

James Hollingworth
James Hollingworth
3,662 Points
James Hollingworth
James Hollingworth
3,662 Points

Ok great, I will give it a go! thanks. Only problem is that the site is fluid but I will see what I can do,

Stone Preston
Stone Preston
42,016 Points

you could use a percentage value for the width instead of declaring a strict pixel value.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

James Hollingworth - I suggest you check out learnlayout.com it's the best tutorial on CSS layout and positioning I've ever seen and it should help clarify some of these layout in yor head.