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 Andrew Collins
Andrew Collins
1,173 Points

Need help with CSS float alignment.

Added the necessary code to JSBin:

http://jsbin.com/qigapo/1/edit?html,css,output

Having trouble with "#iPrimary" and "#iSecondary".

"#iSecondary" seems like it's trying to float next to "#iPrimary". I believe, that if this is the case, this wont let me align "#iSecondary" to the center.

If you need anything else answering, please contact me. All help is greatly appreciated. Thanks in advance.

5 Answers

Julian Gutierrez
Julian Gutierrez
19,325 Points
Julian Gutierrez
Julian Gutierrez
19,325 Points

What is it you are try to accomplish? On your JSBin I see #iPrimary and #iSecondary stacking nicely. Only thing I can see is that #iSecondary isn't filling the full width of its container div.

Andrew Collins
Andrew Collins
1,173 Points
Andrew Collins
Andrew Collins
1,173 Points

I want #iSecondary to be align central. The actual section isn't effected by this, but the h3, and ul is.

Julian Gutierrez
Julian Gutierrez
19,325 Points
Julian Gutierrez
Julian Gutierrez
19,325 Points

You would need a width on your #iSecondary then you can use margin:0 auto; to center it. Still not sure if that's what you need but I included some css below.

#iSecondary
{
  display: block;
  width:50%;
  margin:0 auto;
  clear:left;
  text-align: left;
}
Brent Suggs
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 Points
Brent Suggs
.a{fill-rule:evenodd;}techdegree seal-36
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 Points

Can you tell me why you are floating these elements if they are going to be stacked vertically ( the natural flow of the document) ?

Otherwise, if staying with the float then the response above would fix it. Clearing the left side and then centering with a percentage based with and margin: 0 auto; .

Andrew Collins
Andrew Collins
1,173 Points
Andrew Collins
Andrew Collins
1,173 Points

Fixed the problem. I floated them, because when on a display lower than 480px, the section would be resized, and stretched all the way to the top of the body. So if I added a background color, it would look as though the h3 was stuck to the nav/header, floating them would fix this issue, but create a new one I couldn't solve. Also, changing the position type would fix this, but again... Created a new one I couldn't be bothered with.
If I knew the formatting, I'd add a screenshot for you... I know it's kinda hard to imagine what was going on.

Here is the fixed code: http://jsbin.com/gujoga/1/edit