How to align two elements on the same line without changing HTML

Question

I have two elements on the same line floated left and floated right    lt style type  text css  gt   element1  float left    element2  float right    lt  style gt    lt div id  element1  gt   element 1 markup  lt  div gt   lt div id  element2  gt   element 2 markup  lt  div gt    I need for element2 to line up next to element1 with about 10 pixels of padding between the two  The problem is that element2 s width can change depending on content and browser  font size  etc   so it s not always lined up perfectly with element1  I can t just apply a margin-right and move it over    I also cannot change the markup    Is there a uniform way to line them up  I tried margin-right with a percentage  I tried a negative margin on element1 to bring element2 closer  but couldn t get it to work

User · Answer

By using display  inline-block  And more generally when you have a parent  always there is a parent except for html  use display  inline-block  for the inner elements  and to force them to stay in the same line even when the window get shrunk  contracted   Add for the parent the two property         white-space  nowrap      overflow-x  auto    here a more formatted example to make it clear    parent       white-space  nowrap      overflow-x  auto      children      display  inline-block     margin-left  20px       For this example particularly  you can apply the above as fellow  i m supposing the parent is body  if not you put the right parent   you can also like change the html and add a parent for them if it s possible   body     body may pose problem depend on you context  there is no better then have a specific parent           white-space  nowrap          overflow-x  auto       element1   element2    you can like put each one separately  if the margin for the first element is not wanted      display  inline-block     margin-left  10px       keep in mind that white-space  nowrap  and overlow-x  auto  is what you need to force them to be in one line  white-space  nowrap  disable wrapping  And overlow-x auto  to activate scrolling  when the element get over the frame limit

User · Answer

In cases where I use floated elements like that  I usually need to be sure that the container element will always be big enough for the widths of both floated elements plus the desired margin to all fit inside of it  The easiest way to do that is obviously to give both inner elements fixed widths that will fit correctly inside of the outer element like this    container  width  960px    element1   float left  width 745px  margin-right 15px    element2   float right  width 200px     If you can t do that because this is a scaling width layout  another option is to have every set of dimensions be percentages like    element1  float left  width 70   margin-right 10    element2  float right  width 20      This gets tricky where you need something like this    element1  float left  width 70   margin-right 10    element2  float right  width 200px     In cases like that  I find that sometimes the best option is to not use floats  and use relative absolute positioning to get the same effect like this    container  position relative      So IE won t bork the absolute positioning of  element2     element1  margin-right 215px    element2  display  block  position absolute  top 0  right 0  height 100   width 200px     While this isn t a floated solution  it does result in side by side columns where they are the same height  and one can remain fluid with while the other has a static width

User · Answer

This is what I used for similar type of use case as yours    lt style type  text css  gt   element1  display inline-block  width 45   padding 10px   element2  display inline-block  width 45   padding 10px   lt  style gt    lt div id  element1  gt   element 1 markup  lt  div gt   lt div id  element2  gt   element 2 markup  lt  div gt    Adjust your width and padding as per your requirement  Note - Do not exceed  width  more than 100  altogether  ele1 width  ele2 width  to add  padding   keep it less than 100

User · Answer

Using display inline-block   element1  display inline-block margin-right 10px     element2  display inline-block      Example

User · Answer

x000D   x000D  div     display  flex    justify-content  space-between    x000D   lt div gt     lt p gt Item one lt  p gt     lt a gt Item two lt  a gt   lt  div gt  x000D   x000D   x000D

User · Answer

Change your css as below   element1  float left margin-right 10px     element2  float left      Here is the JSFiddle  http   jsfiddle net a4aME

User · Answer

element1  float left    element2  padding-left   20px  float left     fiddle   http   jsfiddle net sKqZJ   or   element1  float left    element2  margin-left   20px float left     fiddle   http   jsfiddle net sKqZJ 1   or   element1  padding-right   20px  float left    element2  float left     fiddle   http   jsfiddle net sKqZJ 2   or   element1  margin-right   20px  float left    element2  float left     fiddle   http   jsfiddle net sKqZJ 3   reference   The Difference Between CSS Margins and Padding

[html] How to align two elements on the same line without changing HTML

Examples related to html

Examples related to css

Examples related to css-float

Examples related to margin