0

I am creating apps within this interface which includes divs that can be resized. I have this one (customers) set to open at the size of the contents via setting a default height and width. The tables on the right pull lots of information from a query. It is somewhat annoying to scroll side to side in the little menu. The left side is fine and the text inputs can stay the same. What I want is for the left side to stay the same (always) and for the left side of the right side to always be flush.

Basically, I want the right div elements (within the container div, marked by red in image below) to expand right to fill the box dynamically. I've tried and found some janky methods which make getting everything to stay proper a little funky.

So, community, what is the best way to keep the left side of this div lined up with the fixed left half, while making the right side adjustable to fill only to the right?

enter image description here Here is a link to the image

Jack
  • 9,151
  • 2
  • 32
  • 44
needingSomeAnswers
  • 13
  • 5
  • I don't see any code so just guessing but it seems you have specified an exact width for your divs. If you want them dynamic, then you can't do that. Use a percentage width (or full width) instead. Share some code and we can likely help you more. – Miguel-F Jul 06 '18 at 12:08
  • I figured it out. The trick was to set 2 larger divs to display:table-cell and set the left one to a fixed width. The right one stays aligned and fills the container. then you can make divs inside the table cell divs that stay properly sized. – needingSomeAnswers Jul 06 '18 at 14:31

1 Answers1

1

I figured it out. The trick was to set 2 larger divs to display:table-cell and set the left one to a fixed width. The right one stays aligned and fills the container. Then you can make divs inside the table cell divs that stay properly sized.

#thisland {
    display: table;
    width: 100%;
    height:100%;
    min-height:800px;
    min-width: 800px;
    position: absolute;
}
#westsyde, #eastsyde {
    display: table-cell;
}
#westsyde {
    border:1px solid black;
    width: 350px;
    position: relative;
    height:100%;
}
#eastsyde {
    border:1px solid white;
    position: relative;
    height:100%;
}

HTML would be like this, so #eastsyde fills to the right side of #thisland

<div id="thisland>
   <div id="westsyde"></div>
   <div id="eastsyde"></div>
</div>
SOS
  • 6,430
  • 2
  • 11
  • 29
needingSomeAnswers
  • 13
  • 5