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

Posted by Orkhan Mammadov
Orkhan Mammadov
Courses Plus Student 3,932 Points

Positioning elements side by side

http://port-80-oezco6sxp9.treehouse-app.com/

İ want to position first four elements side by side on the left corner. And further three elements the same way on the right corner. How can I do that, please give instructions!

Thanks in advance

2 Answers

Abraham Juliot
Abraham Juliot
47,353 Points 
/* Select only the first four elements within the header tag 
& set display to inline-block */

#logo, 
#left-header, 
#right-header, 
body>header:first-of-type>nav:first-of-type {
  display: inline-block;
}

/* Add some optional alignment */

body>header:first-of-type  {
  text-align: left; /* left (default), center, or right*/
}

/* Or, scratch all the above
and make the parent a flex container, 
& align its items at the start */

body>header:first-of-type  {
  display: flex;
  align-items: flex-start;
  flex-direction: row; /* row is default, but you may want row-reverse*/
}

Reference:

Orkhan Mammadov
Orkhan Mammadov
Courses Plus Student 3,932 Points

display: flex; align-items: flex-start; flex-direction: row This code really helped me elements are now side by side but their level are still the same I want all 7 elements to be on the same level. Could you help me with this? Thanks again!

Abraham Juliot
Abraham Juliot
47,353 Points

Looks like this workspace is asleep at the moment. I recommend checking out the flexbox documentaton on MDN and the playgrounds/ cheat sheets--you can do a lot with flexbox:

Also, there's 2 treehouse courses that are a treasure house of help: layout basics and flexbox basics.

Orkhan Mammadov
PLUS
Orkhan Mammadov
Courses Plus Student 3,932 Points
Orkhan Mammadov
Orkhan Mammadov
Courses Plus Student 3,932 Points

Thanks a lot! Appreciate!