Css div alignment

Question

Hello, 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?

Answer 1

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

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

Answer 2

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 }

Answer 3

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

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

Answer 4

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.