How do I line up 3 divs on the same row

Question

Can someone please help me with this problem as i have been dealing with it for a long time now      I am trying to get 3 divs on the same line next to each other one of the divs looks like this    lt div gt       lt h2 align  center  gt San Andreas  Multiplayer lt  h2 gt       lt div align  center  gt       lt font size   1  gt           lt em class  heading description  gt 15 pence per slot lt  em gt         lt  font gt         lt img src  http   fhers com images game servers sa-mp jpg  class  alignleft noTopMargin  style  width  188px    gt         lt a href  gfh  class  order-small  gt           lt span gt order lt  span gt  lt  a gt       lt  div gt    and the other two are the same divs please help me get all three divs on the same line one on the right one on the mid and one on the left

User · Answer

This is easier and gives purpose to the never used unordered/ordered list tags.

In your CSS add:

    li{float: left;}  //Sets float left property globally for all li tags.

Then add in your HTML:

    <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>        
    </ul>

Now watch it all line up perfectly! No more arguing over tables vs divs!

User · Answer

I m not sure how I ended up on this post but since most of the answers are using floats  absolute positioning  and other options which aren t optimal now a days  I figured I d give a new answer that s more up to date on it s standards  float isn t really kosher anymore     x000D   x000D   parent   x000D    display  flex  x000D    flex-direction row  x000D    x000D   x000D   column   x000D    flex  1 1 0px  x000D    border  1px solid black  x000D    x000D   lt div class  parent  gt  x000D       lt div class  column  gt Column 1 lt  div gt  x000D       lt div class  column  gt Column 2 lt br gt Column 2 lt br gt Column 2 lt br gt Column 2 lt br gt  lt  div gt  x000D       lt div class  column  gt Column 3 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Why don t try to use bootstrap s solutions  They are perfect if you don t want to meddle with tables and floats    x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  rel  stylesheet   gt   lt  --- This line is just linking the bootstrap thingie in the file  The real thing starts below -- gt  x000D   x000D   lt div class  container  gt  x000D     lt div class  row  gt  x000D       lt div class  col-sm-4  gt  x000D        One of three columns x000D       lt  div gt  x000D       lt div class  col-sm-4  gt  x000D        One of three columns x000D       lt  div gt  x000D       lt div class  col-sm-4  gt  x000D        One of three columns x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    No meddling with complex CSS  and the best thing is that you can edit the width of the columns by changing the number  You can find more examples at https   getbootstrap com docs 4 0 layout grid

User · Answer

Check out the foundation rapid prototyping framework they handled this quite nicely  basically they allow you to use HTML like this    lt div class  row  gt       lt div class  four columns  gt       lt  div gt       lt div class  four columns  gt       lt  div gt       lt div class  four columns  gt       lt  div gt   lt  div gt    This is the simplest HTML CSS grid system that I ve come across  it s based on 12 column grid   Basically the columns are given a   width and left margin relative to the parent row  They columns have float set to left  position set to relative  and display set to block    The row has several properties set on it that care core of an issue that normally causes the containing div to collapse to height of 0 preventing the following divs from getting  pushed  down as they should   You can find examples of using the foundation grid system here  http   foundation zurb com docs grid php  If you don t want to use the entire framework the following CSS should do the trick with the example code I provided    row after       content          clear  both      display  table      four column       float  left      width  33       If you really specifically want a left center and right columns then use code like this   CSS    row after       content          clear  both      display  table      left       float  left      width  100px      center       margin  0 auto      width  100px      right       float  right      width  100px      HTML    lt div class  row  gt       lt div class  left  gt left lt  div gt       lt div class  right  gt right lt  div gt       lt div class  center  gt center lt  div gt   lt  div gt

User · Answer

here are two samples  http   jsfiddle net H5q5h 1   one uses float left and a wrapper with overflow hidden  the wrapper ensures the sibling of the wrapper starts below the wrapper    the 2nd one uses the more recent display inline-block and wrapper can be disregarded  but this is not generally supported by older browsers so tread lightly on this one  also  any white space between the items will cause an unnecessary  margin-like  white space on the left and right of the item divs

User · Answer

Another possible solution    lt div gt     lt h2 align  center  gt    San Andreas  Multiplayer  lt  h2 gt       lt div align  center  gt   lt font size   1  gt  lt em class  heading description  gt 15 pence per slot lt  em gt  lt  font gt   lt img src   http   fhers com images game servers sa-mp jpg  class   alignleft noTopMargin  style  width  188px     gt   lt a href  gfh  class  order-small  gt  lt span gt order lt  span gt  lt  a gt       lt  div gt    lt  div gt    Also helpful as well

User · Answer

See my code   x000D   x000D   float-left   x000D      float left  x000D      width 300px     or 33  for equal width independent of parent width x000D    x000D   lt div gt  x000D       lt h2 align  center  gt San Andreas  Multiplayer lt  h2 gt  x000D       lt div align  center  class  float-left  gt CONTENT OF COLUMN ONE GOES HERE lt  div gt  x000D       lt div align  center  class  float-left  gt CONTENT OF COLUMN TWO GOES HERE lt  div gt  x000D       lt div align  center  class  float-left  gt CONTENT OF COLUMN THREE GOES HERE lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

2019 answer   Using CSS grid    parent     display  grid    grid-template-columns  1fr 1fr 1fr    grid-template-rows  1fr

User · Answer

Old topic but maybe someone will like it   fiddle link http   jsfiddle net 74ShU    lt div class  mainDIV  gt       lt div class  leftDIV  gt  lt  div gt       lt div class  middleDIV  gt  lt  div gt       lt div class  rightDIV  gt  lt  div gt   lt  div gt    and css   mainDIV      position relative      background yellow      width 100       min-width 315px     leftDIV      position absolute      top 0px      left 0px      height 50px      width 100px      background red     middleDIV      height 50px      width 100px      background blue      margin 0px auto     rightDIV      position absolute      top 0px      right 0px      height 50px      width 100px      background green

User · Answer

Put the divisions in  td  tag  That s it done

User · Answer

Just add float left property on all the divs you want to make appear in a row other than last one  here is example   lt div gt     lt div style  float  left   gt A lt  div gt     lt div style  float  left   gt B lt  div gt     lt div gt C lt  div gt   lt  div gt

User · Answer

I m surprised that nobody gave CSS table layout as a solution    x000D   x000D   Row   x000D      display  table  x000D      width  100     Optional   x000D      table-layout  fixed    Optional   x000D      border-spacing  10px    Optional   x000D    x000D   Column   x000D      display  table-cell  x000D      background-color  red    Optional   x000D    x000D   lt div class  Row  gt  x000D       lt div class  Column  gt C1 lt  div gt  x000D       lt div class  Column  gt C2 lt  div gt  x000D       lt div class  Column  gt C3 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Works in IE8   Check out a JSFiddle Demo

[css] How do I line up 3 divs on the same row?

Examples related to css

Examples related to html