Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Placing elements on a page!!!

I am still having a hard time figuring out how to place element on a page. I am working on a project and as I made changes, elements are starting to overlap and behave strangely!!!!! Any idea what I may have missed in the courses to make me an expert at this? That is my biggest CSS issue. Also, this project is using Bootstrap which seems to interfere with my coding and preventing changes I make form taking effect. I know that frameworks are suppose to save time but!!!!!

5 Answers

Jonathan Roosa
Jonathan Roosa
4,456 Points

The issue may perhaps have something to do with floats, border-box, flexboxes, margin and padding values, or any assortment of those. Could you perhaps paste your code? It'll allow for myself and others to figure out the issue more easily.

I'd also recommend taking this course if you haven't already. It should help with figuring out CSS layouts.

Here is the code:

CSS: .navigation-container { width: 100%; margin-left: auto ; margin-right: auto ; height: 70px; background-color: transparent; }

.navigation-container ul { list-style-type: none; /to remove bullets/ text-align: center; margin: 0 auto; padding: 0px; display:table; overflow: hidden; } .navigation-container li { float: left; padding: 15px; width: 150px; margin-left: auto; margin-right: auto; display: inline-block; } /* philippe coding */ .navigation-container li a { color:#fff; background-color: #1DA2C4; padding: 10px; margin: 10px; border-radius: 10px; }

HTML: <div class="row" style="margin:10px auto;"> <div class="span8 navigation-container"> <ul> <li><a href="/">Home</a></li> <li><a href="/contactus.html">Contact Us</a></li> <li><a href="/sponsors.html">Sponsors</a></li> <li><a href="/stats.html">Statistics</a></li> <li><a href="/team.html">Team</a></li> </ul> </div> <div class="span4 social-icons"> <span class="icon-facebook icon-2x"></span> <span class="icon-twitter icon-2x"></span> <span class="icon-google-plus icon-2x"></span> </div> </div>

When working on a project, how do I know if they are using float, flexible or grid layout? Does it make much of a difference when working to make changes to the code?

I would highly recommend taking a step back and doing Guil Hernandez's "CSS Layout Techniques" Deep Dive. If you don't have a solid understanding of how CSS layout technique's work, Bootstrap is only going to confuse you.

I shall do that! My issue is that I seem to understand the processes but when it comes to working on a project, that is a whole different issue. I am assuming that practice and lots of patience and frustration may be the answer!!!!

When working on a project, how do I know if they are using float, flexible or grid layout? Does it make much of a difference when working to make changes to the code?

Those things tend to go hand in hand but if I had to differentiate, if they are using a grid, the units of measurement would be in pixels and if it was flexible (or fluid), the measurements would be in ems. As for using float, just look through your style sheets for any selector that has been assigned a float attribute. Hope this helps!

Still not sure about what I have but the information you gave me is appreciated. Here are tow pieces of code:

.main-header { position: fixed; top: 0; width: 100%; height: 120px; }

.feat-img {
    width: 50%;
    float: left;
    margin-right: 25px;