How can I align two divs horizontally

Question

I need to align two divs next to each other  so that each contains a title and a list of items  similar to    lt div gt       lt span gt source list lt  span gt       lt select size  10  gt           lt option   gt           lt option   gt           lt option   gt       lt  select gt   lt  div gt    lt div gt       lt span gt destination list lt  span gt       lt select size  10  gt           lt option   gt           lt option   gt           lt option   gt       lt  select gt   lt  div gt    It s remarkably easy to do with tables  but I don t want to use tables  How can I achieve this

User · Answer

if you have two divs  you can use this to align the divs next to each other in the same row    x000D   x000D   keyword   x000D      float left  x000D      margin-left 250px  x000D      position absolute  x000D    x000D   x000D   bar   x000D      text-align center  x000D    x000D   lt div id  keyword  gt  x000D  Keywords  x000D   lt  div gt  x000D   lt div id  bar  gt  x000D       lt input type   textbox   name   keywords  value    onSubmit  search    maxlength 40 gt  x000D       lt input type   button   name  go  Value  Go ahead and find  onClick  search    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You need to float the divs in required direction eg left or right

User · Answer

float is obsolete  better use display  flex   example    parent-div  display  flex    indicate the direction by flex-direction  row column   go down if no space by flex-wrap  wrap nowrap  more properties here

User · Answer

lt div gt   lt div style  float left width 45     gt       lt span gt source list lt  span gt       lt select size  10  gt           lt option   gt           lt option   gt           lt option   gt       lt  select gt   lt  div gt    lt div style  float right width 45    gt       lt span gt destination list lt  span gt       lt select size  10  gt           lt option   gt           lt option   gt           lt option   gt       lt  select gt   lt  div gt   lt div style  clear both  font-size 1px   gt  lt  div gt   lt  div gt    Clear must be used so as to prevent the float bug  height warping of outer Div    style  clear both  font-size 1px

User · Answer

Add a class to each of the divs    x000D   x000D   source   destination   x000D      float  left  x000D      width  48   x000D      margin  0  x000D      padding  0  x000D    x000D   source   x000D      margin-right  4   x000D    x000D   lt div class  source  gt  x000D       lt span gt source list lt  span gt  x000D       lt select size  10  gt  x000D           lt option   gt  x000D           lt option   gt  x000D           lt option   gt  x000D       lt  select gt  x000D   lt  div gt  x000D   lt div class  destination  gt  x000D       lt span gt destination list lt  span gt  x000D       lt select size  10  gt  x000D           lt option   gt  x000D           lt option   gt  x000D           lt option   gt  x000D       lt  select gt  x000D   lt  div gt  x000D   x000D   x000D    That s a generic percentages solution - using pixel-based widths is usually much more reliable  You ll probably want to change the various margin padding sizes too   You can also optionally wrap the HTML in a container div  and use this CSS    container     overflow  hidden      This will ensure subsequent content does not wrap around the floated elements

User · Answer

Float the divs in a parent container  and style it like so    x000D   x000D   aParent div   x000D      float  left  x000D      clear  none   x000D    x000D   lt div class  aParent  gt  x000D       lt div gt  x000D           lt span gt source list lt  span gt  x000D           lt select size  10  gt  x000D               lt option   gt  x000D               lt option   gt  x000D               lt option   gt  x000D           lt  select gt  x000D       lt  div gt  x000D       lt div gt  x000D           lt span gt destination list lt  span gt  x000D           lt select size  10  gt  x000D               lt option   gt  x000D               lt option   gt  x000D               lt option   gt  x000D           lt  select gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Wrap them both in a container like so    x000D   x000D   container   x000D      float left   x000D      width 100    x000D    x000D   container div   x000D      float left  x000D    x000D   lt div class  container  gt  x000D       lt div gt  x000D           lt span gt source list lt  span gt  x000D           lt select size  10  gt  x000D               lt option   gt  x000D               lt option   gt  x000D               lt option   gt  x000D           lt  select gt  x000D       lt  div gt  x000D       lt div gt  x000D           lt span gt destination list lt  span gt  x000D           lt select size  10  gt  x000D               lt option   gt  x000D               lt option   gt  x000D               lt option   gt  x000D           lt  select gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For your purpose  I d prefer using position instead of floating   http   jsfiddle net aas7w0tw 1   Use a parent with relative position   position  relative    And children in absolute position   position  absolute    In bonus  you can better drive the dimensions of your components

User · Answer

Nowadays  we could use some flexbox to align those divs    x000D   x000D   container   x000D      display  flex  x000D    x000D   lt div class  container  gt  x000D       lt div gt  x000D           lt span gt source list lt  span gt  x000D           lt select size  10  gt  x000D               lt option   gt  x000D               lt option   gt  x000D               lt option   gt  x000D           lt  select gt  x000D       lt  div gt  x000D   x000D       lt div gt  x000D           lt span gt destination list lt  span gt  x000D           lt select size  10  gt  x000D               lt option   gt  x000D               lt option   gt  x000D               lt option   gt  x000D           lt  select gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt html gt   lt head gt   lt style type  text css  gt   floatingDivs float left    lt  style gt   lt  head gt    lt body gt   lt div id  floatingDivs  gt       lt span gt source list lt  span gt       lt select size  10  gt           lt option   gt           lt option   gt           lt option   gt       lt  select gt   lt  div gt    lt div id  floatingDivs  gt       lt span gt destination list lt  span gt       lt select size  10  gt           lt option   gt           lt option   gt           lt option   gt       lt  select gt   lt  div gt    lt  body gt   lt  html gt

[html] How can I align two divs horizontally?

Examples related to html

Examples related to css