Как DIV блок не уменьшается

Question

У меня есть таблица, построенная div, она имеет вашу ширину в соответствии с вашим контентом.

Html-теги и тело имеют ширину и большую высоту, однако после стиля слева: 583px div начинает уменьшать свою ширину.

В примере jsFiddle перетащите таблицу справа: https://jsfiddle.net/rafaelcb21/ateL1gje/

Интересно, как сделать Div пребывание одинакового размера в любом месте свободного пространства по ширине и высоте тела тега, но остаться с ширину в соответствии с вашим контентом?

ДИВ

<div class="table node1" style="left: 583px; top: 121px;"> 
    <div class="td title">Test - Test</div> 
    <div class="td body">Test Operation</div> 
    <div class="td body">Test Type Operation</div> 
    <div class="td body">Test Operation</div> 
    <div class="td body">Test Operation</div> 
    <div class="td body">Test Type Operation</div> 
    <div class="td body">Test Type Operation</div> 
    <div class="td body foot">Test Operation Raise now</div> 
</div> 

Jquery и Jquery UI

$('.node1').draggable(); 

CSS

html, body { 
    padding:0px; 
    margin:0px; 
    width: 3300px; 
    height: 5000px; 
} 

.table { 
    position:absolute; 
    cursor:pointer; 
    border: 1px solid #ffffff; 
    border-radius: 10px; 
    font-family: 'Proxima Nova Bold',"Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif; 
    font-style: normal; 
    font-size: 70%; 
    background: #E8EDFF; 
} 

.td {   
    padding-top: 4px; 
    padding-bottom: 4px; 
    padding-left: 7px; 
    padding-right: 7px; 
    background: #E8EDFF; 
    border: 1px solid #ffffff; 
} 

.title { 
    border-top-left-radius: 10px; 
    border-top-right-radius:10px; 
    background: #B9C9FE; 
    color: #039; 
    font-weight: bold; 
} 

.body { 
    color: #669; 
} 

.body:hover { 
    background: #d0dafd; 
} 

.foot { 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius:10px;  
} 

Answer 1

Чтобы остановить .table изменения размера, добавить min-width свойства этого CSS:

.table { 
    position:absolute; 
    cursor:pointer; 
    border: 1px solid #ffffff; 
    border-radius: 10px; 
    font-family: 'Proxima Nova Bold',"Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif; 
    font-style: normal; 
    font-size: 70%; 
    background: #E8EDFF; 
    min-width:150px /*new style */ 
} 

Demo here

Answer 2

Добавление мин-шириной свойства это отличная идея, чтобы убедиться, что ширина не бывает слишком мала, если это вызывает ваш DIV стекать странице вы можете установить свойство

margin-left: 583px; 
min-width: 150px; 

вместо

left: 583px; 

Answer 3

Я нашел решение, я добавляю display: table;https://jsfiddle.net/rafaelcb21/ateL1gje/3/

How to make div not larger than its contents?

.table { 
    display: table; /*new style */ 
    position:absolute; 
    cursor:pointer;  
    border: 1px solid #ffffff; 
    border-radius: 10px; 
    font-family: 'Proxima Nova Bold',"Segoe UI",Roboto,"Droid Sans","Helvetica Neue",Arial,sans-serif; 
    font-style: normal; 
    font-size: 70%; 
    background: #E8EDFF; 
}