Align div elements side by side

Question

I know this is a rather simple question  but I can t figure it out for the life of me    I have two links which I ve applied a background image to   Here s what it currently looks like  apologies for the shadow  just a rough sketch of a button      However  I want those two buttons to be side by side   I can t really figure out what needs to be done with the alignment    Here s the HTML   lt div id  dB   gt       lt a href  http   notareallink com  title  Download  id  buyButton  gt Download lt  a gt    lt  div gt   lt div id  gB  gt       lt a href     title  Gallery  onclick   j   galleryDiv   toggle  slow   return false   id  galleryButton  gt Gallery lt  a gt        lt  div gt    Here s the CSS   buyButton       background  url  assets buy png   0 0 no-repeat      display block      height 80px      width 232px       text-indent -9999px     buyButton hover  width  232px  height  80px  background-position  -232px 0     buyButton active   width  232px  height  80px  background-position  -464px 0      galleryButton       background  url  images galleryButton png   0 0 no-repeat      display block      height 80px      width 230px       text-indent -9999px     galleryButton hover  width  230px  height  80px  background-position  -230px 0     galleryButton active   width  230px  height  80px  background-position  -460px 0

User · Answer

x000D   x000D   section     display  flex      element-left     width  94       element-right     flex-grow  1    x000D   lt div class  section  gt     lt div id  dB  class  element-left    gt       lt a href  http   notareallink com  title  Download  id  buyButton  gt Download lt  a gt     lt  div gt     lt div id  gB  class  element-right  gt       lt a href     title  Gallery  onclick   j   galleryDiv   toggle  slow   return false   id  galleryButton  gt Gallery lt  a gt     lt  div gt   lt  div gt  x000D   x000D   x000D   or  x000D   x000D   section     display  flex    flex-wrap  wrap      element-left     flex  2      element-right     width  100px    x000D   lt div class  section  gt     lt div id  dB  class  element-left    gt       lt a href  http   notareallink com  title  Download  id  buyButton  gt Download lt  a gt     lt  div gt     lt div id  gB  class  element-right  gt       lt a href     title  Gallery  onclick   j   galleryDiv   toggle  slow   return false   id  galleryButton  gt Gallery lt  a gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Apply float left  to both of your divs should make them stand side by side

User · Answer

Beware float  left         there are many ways to align elements side-by-side   Below are the most common ways to achieve two elements side-by-side     Demo  View edit all the below examples on Codepen    Basic styles for all examples below     Some basic css styles for parent and child elements in these examples     parent     background  mediumpurple    padding  1rem     child     border  1px solid indigo    padding  1rem          Using the float solution my have unintended affect on other elements   Hint  You may need to use a clearfix    html   lt div class  parent  gt     lt div class  child float-left-child  gt A lt  div gt     lt div class  child float-left-child  gt B lt  div gt   lt  div gt    css   float-left-child     float  left          html   lt div class  parent  gt     lt div class  child inline-block-child  gt A lt  div gt     lt div class  child inline-block-child  gt B lt  div gt   lt  div gt    css   inline-block-child     display  inline-block        Note  the space between these two child elements can be removed  by removing the space between the div tags      html   lt div class  parent  gt     lt div class  child inline-block-child  gt A lt  div gt  lt div class  child inline-block-child  gt B lt  div gt   lt  div gt    css   inline-block-child     display  inline-block          html   lt div class  parent flex-parent  gt     lt div class  child flex-child  gt A lt  div gt     lt div class  child flex-child  gt B lt  div gt   lt  div gt    css   flex-parent     display  flex     flex-child     flex  1          html   lt div class  parent inline-flex-parent  gt     lt div class  child  gt A lt  div gt     lt div class  child  gt B lt  div gt   lt  div gt    css   inline-flex-parent     display  inline-flex          html   lt div class  parent grid-parent  gt     lt div class  child  gt A lt  div gt     lt div class  child  gt B lt  div gt   lt  div gt    css   grid-parent     display  grid    grid-template-columns  1fr 1fr

User · Answer

keep it simple   lt div align  center  gt   lt div style  display  inline-block  gt   lt img src  img1 png  gt   lt  div gt   lt div style  display  inline-block  gt   lt img src  img2 png  gt   lt  div gt   lt  div gt

[css] Align <div> elements side by side

Examples related to css

Examples related to html

Examples related to alignment