How can I achieve this,


I created a place holder, with these properties, but I want the main content to fill the entire space between the two placeholders, plus when the menu appears I want it to have the same behavior with the main content, any ideas?


I attached the OML, you will see following:

this as start doesn't start at the top:

I want the main container in the middle to take the space of what's left even when more items and right and left containers are taking more place.

 

this container will have some items with visible or not property that will be changing, so each time an item is visible i want it ti take more space


You wrote top0: ; instead of top: 0; 

But still, this smells like CSS troubles. You might need to dig in a little deeper with your browser Developer tools or consult someone who's more well versed in CSS.


For containers holding elements which grow to occupy space left over, you'll need to use Flex or Grid display; 


Also, try not to use the little white box for your CSS, that creates 'inline css' which is then hard to customise. Instead, create CSS classes on your screen or module's CSS file and apply those classes to your elements.