CODEWITHSUNDEEP
csshtmlalignment
Awan
Awan

Reputation: 18560

How to restrict DIVs to be in same line

I have three DIVs:

<div style="float:left;" id="a"> a </div>
<div style="float:left;" id="b"> b </div>
<div style="float:left;" id="c"> c </div>

I want all DIVs in same line but in some browsers, last DIV come down because of size of content in DIVs.

How to restrict them to be in same line even their is more content in DIVs. In this case horizontal scrollbar will be used to see all content.

Thanks

Upvotes: 1

Views: 955

Answers (4)

rahool
rahool

Reputation: 639

You need to wrap your divs in a parent div and set 'white-space: nowrap' on it. Also, set 'display:inline-block' for you divs to get the desired effect.

Try something like this,

.parent {
  white-space: nowrap;       
}

.child {
  width: 200px;
  height: 200px;
  display:inline-block;       
}

<div class="parent">
  <div  class="child" id="a"> a </div>
  <div  class="child" id="b"> b </div>
  <div  class="child" id="c"> c </div>
</div>

Upvotes: 5

Geoffrey
Geoffrey

Reputation: 11354

Try this:

<div style="display: inline-block;">a</div>
<div style="display: inline-block;">b</div>
<div style="display: inline-block;">c</div>

Upvotes: 1

Shalini Subramani
Shalini Subramani

Reputation: 502

Please define height property.

Upvotes: 0

spraff
spraff

Reputation: 33405

Put them in a parent with overflow-x.

Upvotes: 3

Related Questions