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
Ovidiu Grosu
10,945 PointsAligning elements
Hi everyone ! I just finished the first two courses from Front End Web Development and I feel like I have a basic understanding of html and css. The main problem I have, I just don't understand how to align elements on the page.... I used the display property, floats etc. but I'm never sure how they work.. Here's what I mean :
http://tinypic.com/r/24zw2tf/8
How they should be aligned.
http://oi62.tinypic.com/df8yw.jpg
Also another problem I ran into, for example on the title and description how do I align them properly ? Center them with each other and not on the page.
Thanks in advance, Ovidiu.
1 Answer
Jonathan Grieve
Treehouse Moderator 91,254 PointsThere are a number of ways to achieve align elements.
Floats are one way but if you want to align items left to right you could set them to display inline-block display: inline-block so they're like block level elements but take up the same space as inline. Then you can further streamline precise positioning by putting a margin-bottom property on your navigation element.
You can also check out flexbox alignment
display: flex
And see how your elements interact that way.
But it looks like you're almost there anyway with how you want it to look so try something like this
element {
position: relative;
top: 10px;
left: 10px;
}
to get a more precise position. :)