CODEWITHSUNDEEP
htmlcss
Patrick McDermott
Patrick McDermott

Reputation: 1220

Static and responsive margin for responsive container

I have an a sidenav for my AngularJs application with a width of 75px. I need the margin to be equal on the container of the content so I have added extra margin onto the left margin (which varies depending on the viewport size), to compensate for the sidenav, and given the auto value to the right, like so: 

.container { width: 92.5%; margin: 0 auto 0 9.5rem; } //right auto, left 9.5rem

Issue is that depending on viewport size, the right margin isn't always equal to the left. I can adjust the margin so it is equal, for lets say, 992px, but as soon as I increase/decrease the size, the right side is no longer equal and the container visually looks unbalanced.

Question

What CSS property do I use to maintain an equal margin on both sides when I have to use a static value for the left margin?

Here's the JSFiddle

Upvotes: 3

Views: 188

Answers (1)

Ziv Weissman
Ziv Weissman

Reputation: 4516

The problem is that your app-container starts from the body and not from your container, you can add this, then it will be equal and not break the container

.app-container {
    padding: 0 1%;
    width: calc(100% - 75px);
    left: 75px;
    position: absolute;
}

A better solution is "the bootstrap way" (use bootstrap or something similar - all float:left, and define width in percentages)

Upvotes: 1

Related Questions