Using a percentage margin in CSS but want a minimum margin in pixels?

css margin
Brett picture Brett · Jun 15, 2011 · Viewed 83.2k times · Source

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?

Answer

Clarus Dignus picture Clarus Dignus · Jan 22, 2016

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.

Related questions

When to use margin vs padding in CSS

When writing CSS, is there a particular rule or guideline that should be used in deciding when to use margin and when to use padding?

Read More
How to align two elements on the same line without changing HTML

I have two elements on the same line floated left and floated right. <style type="text/css"> #element1 {float:left;} #element2 {float:right;} </style> <div id="element1"> element 1 markup </div> <div …

Read More
Why can't I center with margin: 0 auto?

I have a #header div that is 100% width and within that div I have an unordered list. I have applied margin: 0 auto to the unordered list but it won't center it within the header div. Can anybody please tell me …

Read More