How to float 3 divs side by side using CSS

Question

I know how to make 2 divs float side by side  simply float one to the left and the other to the right    But how to do this with 3 divs or should I just use tables for this purpose

User · Answer

try to add  display  block  to the style   lt style gt      left            display  block            float left             width 33          lt  style gt     lt div class  left  gt     lt  div gt   lt div class  left  gt     lt  div gt   lt div class  left  gt     lt  div gt

User · Answer

I usually just float the first to the left  the second to the right  The third automatically aligns between them then    lt div style  float  left   gt Column 1 lt  div gt   lt div style  float  right   gt Column 3 lt  div gt   lt div gt Column 2 lt  div gt

User · Answer

lt br style  clear  left     gt    that code that someone posted up there  it did the trick    when i paste it just before closing the Container DIV  it helps clear all subsequent DIVs from overlapping with the DIVs i ve created side-by-side at the top    lt div gt   lt div class  left  gt  lt  div gt   lt div class  left  gt  lt  div gt           lt div class  left  gt  lt  div gt   lt  --  then magic trick comes here  -- gt   lt br style  clear  left     gt   lt  div gt    tadaa

User · Answer

But does it work in Chrome   Float each div and set clear both for the row  No need to set widths if you dont want to  Works in Chrome 41 Firefox 37  IE 11  Click for JS Fiddle  HTML   lt div class  stack  gt       lt div class  row  gt           lt div class  col  gt              One          lt  div gt           lt div class  col  gt              Two          lt  div gt       lt  div gt           lt div class  row  gt           lt div class  col  gt              One          lt  div gt           lt div class  col  gt              Two          lt  div gt                       lt div class  col  gt              Three          lt  div gt       lt  div gt   lt  div gt    CSS   stack  row    clear both      stack  row   col          float left        border 1px solid

User · Answer

It is same way as you do for the two divs  just float the third one to left or right too    lt style gt     left float left  width 33     lt  style gt    lt div class  left  gt     lt  div gt   lt div class  left  gt     lt  div gt   lt div class  left  gt     lt  div gt

User · Answer

Float all three divs to the left  Like here    first-div     width 370px    height 150px    float left    background-color pink      second-div     width 370px    height 150px    float left    background-color blue      third-div     width 370px    height 150px    float left    background-color purple

User · Answer

Leniel this method is good but you need to add width to all the floating div s  I would say make them equal width or assign fixed width  Something like   content-wrapper  gt  div   width 33 3       you may assign class names to each div rather than adding inline style  which is not a good practice   Be sure to use a clearfix div or clear div to avoid following content remains below these div s    You can find details of how to use clearfix div here

User · Answer

you can float  left for all of them and set the width to 33 333

User · Answer

lt style gt   left-column   float left  width 30   background-color red     right-column   float right  width 30   background-color green     center-column   margin auto  width 30   background-color blue     lt  style gt    lt div id  container  gt   lt section class  left-column  gt THIS IS COLUMN 1 LEFT lt  section gt   lt section class  right-column  gt THIS IS COLUMN 3 RIGHT lt  section gt   lt section class  center-column  gt THIS IS COLUMN 2 CENTER lt  section gt   lt  div gt    the advantage of this way is you can set each column width independant of the other as long as you keep it under 100   if you use 3 x 30  the remaining 10  is split as a 5  divider space between the collumns

User · Answer

Here s how I managed to do something similar to this inside a  lt footer gt  element      lt div class  content-wrapper  gt        lt div style  float left  gt           lt p gt  amp copy  2012 -  DateTime Now Year  Localization ClientName lt  p gt       lt  div gt        lt div style  float right  gt           lt p gt  Localization DevelopedBy  lt a href  http   leniel net  target   blank  gt Leniel Macaferi lt  a gt  lt  p gt       lt  div gt        lt div style  text-align center   gt           lt p gt    24  3347-3110    24  8119-1085 amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp    Html ActionLink Localization Contact  MVC Home ActionNames Contact  MVC Home Name  lt  p gt       lt  div gt    lt  div gt      CSS    content-wrapper       margin  0 auto      max-width  1216px

User · Answer

The modern way is to use the CSS flexbox  see support tables    x000D   x000D   container   x000D    display  flex  x000D    x000D   container  gt  div   x000D    flex  1    grow   x000D    x000D   lt div class  container  gt  x000D     lt div gt Left div lt  div gt  x000D     lt div gt Middle div lt  div gt    x000D     lt div gt Right div lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    You can also use CSS grid  see support tables    x000D   x000D   container   x000D    display  grid  x000D    grid-template-columns  1fr 1fr 1fr     fraction   x000D    x000D   lt div class  container  gt  x000D     lt div gt Left div lt  div gt  x000D     lt div gt Middle div lt  div gt    x000D     lt div gt Right div lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I didn t see the bootstrap answer  so for what s it s worth    lt div class  col-xs-4  gt Left Div lt  div gt   lt div class  col-xs-4  gt Middle Div lt  div gt   lt div class  col-xs-4  gt Right Div lt  div gt   lt br style  clear  both     gt    let Bootstrap figure out the percentages  I like to clear both  just in case

User · Answer

float them all left  make sure a width is specified that they can all fit in their container  either another div or the window   otherwise they will wrap

User · Answer

Just give them a width and float  left   here s an example    lt div style  width  500px   gt    lt div style  float  left  width  200px   gt Left Stuff lt  div gt    lt div style  float  left  width  100px   gt Middle Stuff lt  div gt    lt div style  float  left  width  200px   gt Right Stuff lt  div gt    lt br style  clear  left     gt   lt  div gt

User · Answer

I prefer this method  floats are poorly supported in older versions of IE  really        column-left  position absolute  left  0px  width  33 3   background  red     column-right position absolute  left 66 6   width  33 3   background  green     column-center  position absolute  left 33 3   width  33 3   background  yellow      UPDATED   Of course  to use this technique and due to the absolute positioning you need to enclose the divs on a container and do a postprocessing to define the height of if  something like this    jQuery document  ready function         jQuery   main   height  Math max           jQuery   column-left   height            jQuery   column  -right   height            jQuery   column-center   height                  Not the most amazing thing in the world  but at least doesn t break on older IEs

[css] How to float 3 divs side by side using CSS?

Examples related to css

Examples related to css-float