How to make multiple divs display in one line but still retain width?
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
<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 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.
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