Welcome to WebmasterWorld Guest from 3.227.233.6

Forum Moderators: not2easy

Message Too Old, No Replies

Stretching margins to fit width of container

     
2:38 am on Jun 5, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1139
votes: 115


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?
3:14 am on June 5, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15753
votes: 826


<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.
5:06 am on June 5, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1139
votes: 115


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.
9:13 am on June 5, 2017 (gmt 0)

Full Member

Top Contributors Of The Month

joined:Apr 20, 2017
posts: 334
votes: 73


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]