How to make multiple divs display in one line but still retain width

Question

Normally  you set elements to display  inline if you want them to display in the same line  However setting an element to inline means that the width attribute would be meaningless   How do you make divs to be in the same line without making them inline

User · Answer

You can use float left in DIV or use SPAN tag  like   lt div style  width 100px float left  gt  First  lt  div gt    lt div gt  Second  lt  div gt    lt br  gt    or   lt span style  width 100px   gt  First  lt  span gt    lt span gt  Second  lt  span gt    lt br  gt

User · Answer

You can float your column divs using float  left  and give them widths   And to make sure none of your other content gets messed up  you can wrap the floated divs within a parent div and give it some clear float styling   Hope this helps

User · Answer

I used the property   display  table    and  display  table-cell    to achieve the same Link to fiddle below shows 3 tables wrapped in divs and these divs are further wrapped in a parent div   lt div id  content  gt      lt div id  div-1  gt  lt  -- COntains table -- gt  lt  div gt      lt div id  div-2  gt  lt  -- contains two more divs that require to be arranged one below other -- gt  lt  div gt   lt  div gt    Here is the jsfiddle  http   jsfiddle net vikikamath QU6WP 1  I thought this might be helpful to someone looking to set divs in same line without using display-inline

User · Answer

Flex is the better way  Just try    display  flex

User · Answer

You can use display inline-block   This property allows a DOM element to have all the attributes of a block element  but keeping it inline  There s some drawbacks  but most of the time it s good enough  Why it s good and why it may not work for you   EDIT  The only modern browser that has some problems with it is IE7  See Quirksmode org

[css] How to make multiple divs display in one line but still retain width?

Examples related to css