CODEWITHSUNDEEP
css
developarvin
developarvin

Reputation: 5087

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

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?

Upvotes: 89

Views: 314238

Answers (5)

Vikram
Vikram

Reputation: 4190

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.

Upvotes: 21

莊世坤
莊世坤

Reputation: 51

You can use float:left in DIV or use <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/>

Upvotes: 5

Asitha Yomal
Asitha Yomal

Reputation: 675

Flex is the better way. Just try..

display: flex;

Upvotes: 11

ninty9notout
ninty9notout

Reputation: 1116

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.

Upvotes: 4

lomegor
lomegor

Reputation: 1573

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

Upvotes: 145

Related Questions