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!

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

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;