How to DIV block does not decrease

Question

I have a table built by div, it has your width according with your content.

Html tags and body has width and large height, however, after the style left: 583px the div starts to decrease its width.

In jsFiddle example drag the table to the right: https://jsfiddle.net/rafaelcb21/ateL1gje/

I wonder how to make the div stay with same size anywhere in the available space by the width and height of the body tag, but stay with your width according with your content?

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 and 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;    
}

Possible duplicate of [How to make div not larger than its contents?](http://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents) — Heretic Monkey, Jan 18 '17 at 22:38
@Brian; you may want to update the edit message you're using. The question you're pointing to was closed quite a long time ago, and had no answer. Maybe http://meta.stackoverflow.com/questions/299728/are-we-still-trying-to-axe-the-table would be a better target? Might be even better to follow the [burnination process](http://meta.stackoverflow.com/q/250933/215552) for the tag, as there are a lot of questions :). — Heretic Monkey, Jan 18 '17 at 23:08
@MikeMcCaughan - The question I'm using is the one in the tag info itself, but thanks. I note the other one. — Brian Tompsett - 汤莱恩, Jan 18 '17 at 23:33

score 1 · Accepted Answer · answered Mar 16 '16 at 02:23

1

To stop your .table from resizing, add a min-width property to it's 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

answered Mar 16 '16 at 02:23

JanR

6,052
3
23
30

Thank you for your attention, but fix the width not solve because I have many tables with countless sizes. For example, setting the width of 150px but the last line is the content "Test Type Test Operation Type" https://jsfiddle.net/rafaelcb21/ateL1gje/2/ the problem continues. I do not understand what is limiting the natural size of the table after a certain point on the screen. – rafaelcb21 Mar 16 '16 at 02:38

score 0 · Answer 2 · answered Mar 16 '16 at 02:27

0

Adding a min-width property is a great idea to make sure that the width is never too small, if this causes your div to flow off the page you can set a

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

property instead of the

left: 583px;

answered Mar 16 '16 at 02:27

Picklejw_

29
2

score 0 · Answer 3 · edited May 23 '17 at 12:24

I found the solution, I add 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;
}

How to DIV block does not decrease

3 Answers3