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

General Discussion

Posted by Connor Hamilton
Connor Hamilton
5,023 Points

Hard time understanding positions and layout.

So im a graphic designer who shamed to admit uses WYSIWYG editors and finds it really easy to do that way (obviously leaves bad code and hard to edit after)

So im having a crack at hand coding and the possibility it would leave me are excellent.

However im really struggling with positioning divs and moving objects around for a layout.

E.g, something as simple as a nav bar, moving it from one side of the page to the other.

Is there a easy way of doing it or remembering? even having a way of seeing how big a div is and should i size every div? Trying to get my head around the float option is giving me problems aswell.

I dont want to stop trying but would like a suggestion here and there about moving divs around the page, when doing the basic HTML/CSS track i struggled to understand how the cupcakes site was layed out as it was with the grids and how elements was moved from being placed default (just typed in html) and moved accordingly from css.

Any help would be great for a total nooby.

3 Answers

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

You need to get your head around various CSS properties really, things like

Display Position Float

See also here

Any questions then please ask me I will try to make it easy to understand

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Also here is a small example CSS for an ANCHOR element

    a { background: blue; display: block; } // Will make the link take up the full width of it parent element.
    a { background: blue; display: inline; } // Will make the link take up only the space required to show it or a                        given width
    a { background: blue; display: inline; float: right; } As above but to the right inside the parent container

Thats just a snippet

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Conner,

One of the best ways to learn divs is to play with them. When doing this it helps to add different background colors and 1px borders to your divs so you can see where thet are. Also, you must be careful when sizing your divs. For instance, if you are trying to line up three divs horizontally and the additive widths is greater than the width of the element (web page, another div, etc.) they are in a div will be pushed down to make room. This link provides a basic overview of positioning divs. BarelyFitz Designs.

Jeff

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Defo use this snippet too makes understaning sizing easier

    *, *::before, *::after { box-sizing: border-box; }

That way a 300px wide div with 10px padding added will remain 300px rather than 320px. Same for borders

Connor Hamilton
Connor Hamilton
5,023 Points
Connor Hamilton
Connor Hamilton
5,023 Points

Thanks for the quick response guys.

So using coding such as a position followed by top: 20px and right:30px it will place the element correctly within its parent which i understand a bit more and when moving objects around like this is it considered clean code for W3C etc? Same when floating objects.

If its as simple as what i said above with top: x left: x etc etc then i shouldn't really have a problem with it especially when used in conjunction with the Z-Index or should the above method only be used when it really needs to be and i am left with no other option?

Thanks..

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

The top: left: etc will position it depending what you set position to ie position: relative; position: absolute;