Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Christopher Anderson
Christopher Anderson
1,601 Points

how to put an element side by side

how to put an element side by side without using float and please tll me as many ways as possible

1 Answer

Steven Parker
Steven Parker
221,292 Points

A few ways come to mind:

  • If the elements have display: inline or inline-block (and not too wide) they will appear side-by-side naturally.
  • if they are position: absolute you can place them wherever you like using offsets.
  • if they are flex items and the container has flex-direction: row (the default) or row-reverse
  • if they are in a multi-column container (using column-count)
  • if they are cells on the same row in an HTML table
  • if they are contained inside other elements that are arranged using any of the above methods

The best choice might be determined by what other conditions you need to accommodate.

Owa Aquino
Owa Aquino
19,277 Points

just to add.. you can always use float properties.

check the float properties here: https://developer.mozilla.org/en/docs/Web/CSS/float

Steven Parker
Steven Parker
221,292 Points

Owa, The original quesiton was "how to put an element side by side without using float..." :wink:

Owa Aquino
Owa Aquino
19,277 Points

Ohw sorry!.. my bad.. i didn't bother to read the description.