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

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
229,732 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
229,732 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.