Stretching margins to fit width of container

[csdude55]

I have a section that looks like this:

<div id="container" style="margin: 10px">
 <div class="left" style="margin-right: 20px; padding-right: 20px; border-right: 1px solid #000">
  Something
 </div>

 <div class="left" style="margin-right: 20px; padding-right: 20px; border-right: 1px solid #000">
  Something
 </div>

 <div class="left">
  Something
 </div>
</div>

By default, container is 100%.

Currently, I'm using my external stylesheet to set margin-right and padding-right at 20px for high resolution, 12px for low resolution, and 5px for mobile.

Is there a way to just have them stretch out to fill the container automatically, without manually defining the margin and padding?

[lucy24]

<tangent>
... and when you say

class="left" style="margin-right: 20px; padding-right: 20px; border-right: 1px solid #000"

you of course really mean--ahem, cough-cough--

.thisdiv {text-align: left; margin-right: 20px; padding-right: 20px; border-right: 1px solid #000}
class="thisdiv"

</tangent>

Why don't you set your margins as percentages instead? Not as much hard-coding required, and there's more flexibility for the user.

The catch is that, even then, you may not want the same percentages for smaller screens as for bigger ones. Mine, for example, drop from 8 or 5% to 3.33% to 2% as the screen gets smaller, because the less real estate you've got, the less you can devote to empty space. And unfortunately there's a limit to how far you can tell your CSS to do its thing logarithmically.

:: detour to check ::

Yup, that's what I thought. (calc) works with M and A but not P and E. So you can't tell your CSS to set margins based on, say, the square root of your viewport width, which is really what you want.

[csdude55]

Haha, I usually try to just post showing inline CSS to make it more legible :-) I forgot about the class="left", though, which is actually float: left.

I played with percentages, too, but ran into the exact problem you described. I was hoping there might be a simply trick to get it to do what I want; otherwise, I'm stuck giving specific numbers based on the viewport. Which isn't terrible, I just hoped there might be a better way.

[Peter_S]

Considering I did NOT understand the question, my answer might be totally off-topic. But, just in case, it might be the "auto" value that you are looking for.

[edited by: not2easy at 2:52 pm (utc) on Jun 5, 2017]
[edit reason] charter [/edit]