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

Jon Myzzle
Jon Myzzle
6,279 Points
Posted by Jon Myzzle
Jon Myzzle
6,279 Points

Layout Positioning in HTML /CSS

Hello Ladies and Gentleman,

I've come to narrow down something that's been confusing the ever-living daylights out of me since I first started learning HTML and CSS. Countless videos, blogs, textbooks, and articles later I've realized this is my, needs to happen soon, "Ah-HA!" moment!

That being said, layout and positioning. One thing that's throwing me off and causing me a headache and sort of intimidating me with Web Design is the layout and positioning of elements and just how exactly to get them where I want them on the webpage. For example, I want this logo here, that nav-bar over there, and a featured image underneath it. But how exactly do I get them there? Adjust margins? Float them and clear the floats? Make flex containers and use flexbox to position everything on my page? Bootstrap? Stare at the screen and hope they magically end up there?

I've started to understand block elements and in-line block elements and slowly but surely piece together how they sit, but does anybody have a diagram or a graphic that helps explain just how exactly they sit on a page /interact with other elements of the same nature? Kind of like a webpage with the code blocks themselves positioned on the screen if that makes sense?

My apologies if my question is all over the place or doesn't make much sense... this is one of those questions where I know what exactly what i'm confused on and what I want the answer to, but am unsure of exactly how to ask it so others can understand!

Thanks for your help in advance,

Cheers, and Happy Coding everyone! :beers:

-Jon

Denis Omeroviฤ‡
.a{fill-rule:evenodd;}techdegree
Denis Omeroviฤ‡
Full Stack JavaScript Techdegree Student 2,607 Points

Hi Jon, I guess there's no easy explanation for this one. For positioning elements I suggest CSS Grid Layout and flexbox. Most of the simple sites have header, main-content, sidebar and footer. And then you can easily position elements inside header using flexbox or any other technique. lf you don't know how to position elements you should take some courses here at treehouse (Flexbox, CSS Grid Layout...)

1 Answer

Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Valeshan Naidoo
Valeshan Naidoo
27,008 Points

Make your own inventory of tips and copy&paste codes. I also am not the best with css, so what I do is when I like something from a course, I just copy that code into my own notes (oneNote is amazing for this) and take a quick screen shot of what it looks like. It's like my own bootstrap library but just for things I want to use. I do this for navigation bar layouts, content layouts, footer etc.

It's good to just go to my navigation templates, and then look for what I like and then copy and paste the code, so all you have to do is make minor adjustments if necessary. Other than inspecting elements everywhere you go, as far as I know this is as close as you're gonna get to what you're asking for.