CODEWITHSUNDEEP
css
Niger
Niger

Reputation: 4006

Css div alignment

I am trying to render HTML select box. I have 3 Div's inside table cell. Value

When the table expands the alignment of leftDiv and rightDiv is OK. But when the table shrinks below the size of two divs (leftDiv & rightDiv ) the rightDiv is rendering below the leftDiv.

How to make this two Divs stick together all the time?

Upvotes: 0

Views: 520

Answers (4)

o.k.w
o.k.w

Reputation: 25820

You have few choices:

  1. Have the 2 divs width set as relative or percentage (say 50% or 4x%)
  2. Have the table cell (td)'s minimum width set as that or more of the 2 child divs.
    min-width: xxxx;

There are probably a few more methods you can google for.

Upvotes: 2

jaywon
jaywon

Reputation: 8244

Or this, if your table cell is a fixed width (100px in my example):

.leftDiv{width:50px;float:left;}
.rightDiv{width:50px;float:right;}

Upvotes: 0

Jauco
Jauco

Reputation: 1319

Set white-space:nowrap on the on the table cell. And white-space: normal on the divs themselves.

td.myClass {
  white-space: nowrap;
}
#leftDiv , #rightDiv { whitespace: normal }

Upvotes: 0

fushar
fushar

Reputation: 398

You can specify the width of leftDiv & rightDiv with percentage, not pixels

.leftDiv {width: 50%}
.rightDiv {width: 50%}

Upvotes: 0

Related Questions