42

I have set a margin: 0 33% 0 0; however I would also like to make sure the margin is at least a certain px amount. I know there is no min-margin in CSS so I was wondering if I have any options here?

GEOCHET
  • 21,119
  • 15
  • 74
  • 98
Brett
  • 19,449
  • 54
  • 157
  • 290
  • perhaps using an empty div to the right of the one you're setting a margin for? and setting width: 33%; min-width: npx; for that second div? Both elements includied in a container div and floated... Not sure if that'll work though... just an idea. – AR. Jun 14 '11 at 22:11

11 Answers11

36

The true solution here is to use a media query break-point to determine when 33% no longer works for you and should be overridden by the minimum margin in pixels.

/*Margin by percentage:*/
div{
    margin: 0 33% 0 0;
}

/*Margin by pixel:*/
@media screen and ( max-width: 200px ){
    div{
        margin: 0 15px 0 0;
    }
}

In the above code, change the max-width to whatever screen width the 33% right margin no longer works for you.

Clarus Dignus
  • 3,847
  • 3
  • 31
  • 57
20

Place a div with a % width and a static min-width to the right of your element.

<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">
bogatyrjov
  • 5,317
  • 9
  • 37
  • 61
  • 4
    This approach prevents the use of other floating elements and `clear` inside the parent divs, as this will cause the layout to be pushed to unwanted positions. A fix for this is to set `overflow:hidden` on the parent divs above, but that really isn't a wishful scenario and will restrict the use of elements like HTML tooltips as these might be cut off by the bounding box of the non-overflowing divs. – Kafoso Feb 18 '15 at 18:26
  • Did you mean to use `float:right` for the second `div`? – Alexis Wilke Sep 17 '17 at 03:26
19

you can try this

.mm:before {
    content: "";
    display: inline-block;
    width: 33%;
    min-width: 200px;
}
Ever
  • 1,164
  • 1
  • 9
  • 13
7

I know it's late in the game, but have you tried this?

margin: 0 max(33%, 20px) 0 0

where 20px is whatever you want to be at least a certain number of pixels. So the margin will stay fluid but will never fall under 20px.

Hope it helps!

user3009269
  • 442
  • 6
  • 14
  • why is it that `max()` value for `margin` works only if I add it in debug tools but not if I use in source style file? My browser is firefox and I'm using react-sass – Sapinder Singh Jul 11 '20 at 12:34
  • 1
    @Sapinder I'm not familiar with SASS or react-sass, but from what I googled it looks they don't support the CSS max function yet. One of the workarounds is to wrap the max function with calc(). I've made this CodePen as POC https://codepen.io/ella301/pen/oNbMjvB Hope it helps! – user3009269 Jul 12 '20 at 14:43
4

Carl Papworth, in this case, you can use this:

body {margin-left: 60px; margin-right: 60px; width:calc(100%-120px); }
div#container {width:33%;}
Andre Duarte
  • 51
  • 1
  • 5
1

How about this?

body {margin-left: 60px; margin-right: 60px; }
div#container {width:33%;}
GlennFriesen
  • 302
  • 4
  • 15
  • Well, if you're using a 100% width body, it will be a problem since there will be an overflow from on the x-axis. Now you can do an "oveflow-x: hidden", however this will cause an increasing crop of the right div on resize. Tricky! – Carl Papworth Sep 07 '13 at 17:54
  • @CarlPapworth ...or use `box-sizing: border-box;` :) – Brett Oct 10 '15 at 15:11
0

if you are using span than u have to do like this : 

span{
display:block;
margin:auto;
}

working demo

if you are using div than u can do this :

div{
  margin:auto;
}
Phoenix
  • 467
  • 1
  • 11
  • 23
0

I've played with a couple of the aforementioned solutions, but in a fluid and truly responsive setting, I believe the best option is to set the proper padding on the respective container/wrapper. Example: Style:

 html {
   background-color: #fff;
   padding: 0 4em;
 }
 body {
   margin: 0 auto;
   max-width: 42em;
   background-color: #ddf;
 }

Now play around with various window widths, and also try various font sizes.

Also try the working demo.

untill
  • 1,513
  • 16
  • 20
0

You could keep your items in a "container" div and set a padding exact to "min-margin" you'd like to have. It might not be exactly what you're looking for, but it gives you that sense of minimum margin size.

<div class="container">
   <div class="your_div_with_items">
   'items'
   </div>
</div>

Then the CSS:

.container
{
   padding: 0 'min_margin_ammount' 0 0;
}

.your_div_with_items
{
   margin: 0 33% 0 0;
}
lmigas
  • 1
  • 1
0

As far as I understand, you can place a div around your element, that defines a padding. A padding of an outer element is like the margin of an inner element.

Imagine you want at least a margin of 1px:

<div style="padding:1px">
  <div style="margin: 0 33% 0 0;">
      interesting content
  </div>
</div>

edit: this is like Imigas's answer, but I think easier to understand.

DarkTrick
  • 2,447
  • 1
  • 21
  • 39
0

It is also possible to test if a certain percentage of the screen width/height is smaller than a length in pixels.

Here is a simple solution for this using JavaScript:

<body>
 <div id="demo">
  <p> Hello World! </p>
 </div>

 <script>
  if (((window.innerWidth / 100) * 33) < 250) { /* Gets 33% of window width in pixels, tests if it is less than required minimum length (250px) */
  document.getElementById("demo").style.margin = "0 250px 0 0" /* If true, set margin to length in pixels */
  } else {
   document.getElementById("demo").style.margin = "0 33% 0 0" /* If not true, the widow is big enough and percentage length is set */
   }
 </script>
</body>
Quijibo
  • 307
  • 2
  • 13