CODEWITHSUNDEEP
htmlcssmarginfrontend
Deegriz
Deegriz

Reputation: 1925

CSS - Odd issue with centering a div with percentages

I'm building a fairly simple static frontend-only webpage. I have the following css rules for my wrapper div (everything else in the page is in it) and the body:

body {
  background-image: url(../img/background.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
}

#content_wrapper {
  margin: 15px 10%; /*Client wants 20% instead of 10. Navbar must be adjusted accordingly*/
  min-width: 900px;
  padding: 0;
  border-radius: 10px;  
}

Which works fine: Webpage with 10% left and right margin

However, as you can read by my comment the client prefers a 20% margin, as to make the whole page more narrow. However this happens:

Webpage with 20% left and right margin

The page shifts right. This is pretty much the same visual issue I have opening this page with my tablet even using 10% margin (although I would appreciate an explanation to why that happens in tablets, it's not the focus of this question here). How can I fix this? For all I know this shouldn't happen

Upvotes: 0

Views: 50

Answers (2)

study-route
study-route

Reputation: 1

well try changing it to width: 15px 20% 15px 10%; you wish to change only left side margin to 10%. Or put 2 blank div on each side of .content-wrap with 10% width and phantom data to give width to it

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 76905

When you state that 

margin: 15px 20%;

you are effectively telling that you have 20% for both of left and right margin. This means that #content_wrapper has 60% of the container as a maximum. The problem is that 60% might be bigger than the available space. I believe you should add the width to the rule:

width: 60%;

Upvotes: 1

Related Questions