How to make several sections in one line, but keep the width?

Question

Usually you set the elements to display: inline if you want them to appear on the same line. However, setting an element to a string means that the width attribute will be meaningless.

How do you make divs on one line without making them inline?

Answer 1

You can use display:inline-block .

This property allows the DOM element to have all the attributes of the block element, but to support it in a string. There are some disadvantages, but in most cases it is good enough. Why is it good and why it may not work for you.

EDIT: The only modern browser that has some problems with this is IE7. See Quirksmode.org

Answer 2

I used the property

 display: table; 

and

 display: table-cell; 

to achieve the same. The table below shows 3 tables wrapped in divs, and these divs are additionally wrapped in the parent div

 <div id='content'> <div id='div-1'><!-- COntains table --></div> <div id='div-2'><!-- contains two more divs that require to be arranged one below other --></div> </div> 

Here is jsfiddle: http://jsfiddle.net/vikikamath/QU6WP/1/ I thought this could be useful for those who want to set div on one line without using display-inline

Answer 3

Flex is the best way. Just try ..

 display: flex; 

Answer 4

You can float your column separators using float: left; and give them a width.

And to make sure none of your other stuff gets messy, you can wrap the floating divs in the parent div and give it a clear float style.

Hope this helps.

Answer 5

You can use float: left in a DIV or use a SPAN tag like

 <div style="width:100px;float:left"> First </div> <div> Second </div> <br/> 

or

 <span style="width:100px;"> First </span> <span> Second </span> <br/>