CODEWITHSUNDEEP
htmlcss
urfbeyblade
urfbeyblade

Reputation: 17

html - Div alignment issues

So I am currently making a website for a friend of mine and I have set the left and right margin to 80px. This works for everything but my main body. It seems that it expands past the right margin, and simply has a margin of 60px instead of 80px.

Here is a screenshot: http://i.imgur.com/XtRdlUv.png

EDIT: I cut off some of the left margin, sorry for the confusion

As seen with the red arrow, there seems to be an offset when their shouldn't.

Here is my code:

body {
  background: url(image) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  margin-left: 80px;
  margin-right: 100px;
}
.wrapper {
  padding-top: 10px;
  text-align: left;
  margin: 0px auto;
}
.mainbody {
  width: 100%;
  outline: #293135 solid;
  background-color: #444444;
  margin-top: 40px;
  text-align: left;
  padding: 20px;
  color: #FFFFFF;
}
<div class="mainbody" style="text-align: center">
  <font face="Arial, Helvetica, sans" size="4">
    <h1 style="text-decoration: underline">Download</h1>
    <p>Features Include:</p>
  </font>
</div>

Upvotes: 0

Views: 53

Answers (3)

Berk Kaya
Berk Kaya

Reputation: 470

I think you're using old ways. Try this! .mainbody { width: calc(100% - 120px); } This is your new css and JSFiddle link! http://jsfiddle.net/Leo4v9rc/

body {
  background: url(image) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
}
.wrapper {
  padding-top: 10px;
  text-align: left;
  margin: 0px auto;
}
.mainbody {
  width: calc(100% - 120px);
  outline: #293135 solid;
  background-color: #444444;
  margin:40px auto 0 auto;
  text-align: left;
  padding: 20px;
  color: #FFFFFF;
}

Upvotes: 0

Terry
Terry

Reputation: 66123

It is likely because your .mainbody element is using the default content-box, which adds an extra left and right padding of 20px each on top of the 100% width. Therefore, the final computed width of the element would be 100% + 40px, which causes it to 'overflow' of sorts.

To fix this, simply declare box-sizing: border-box, i.e.:

.mainbody {
    box-sizing: border-box;
    width: 100%;
    outline: #293135 solid;
    background-color: #444444;
    margin-top: 40px;
    text-align: left;
    padding: 20px;
    color: #FFFFFF;
}

In fact, it is recommended that you use this rule: * { box-sizing: border-box;} as recommended here.

Upvotes: 0

Oriol
Oriol

Reputation: 288120

You don't need

width: 100%;

Since .mainbody is a block element, it will expand to fill all the remaining space.

Otherwise, adding it produces the problem because of the content-box sizing model.

body {
  background: url(image) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  margin-left: 80px;
  margin-right: 100px;
}
.wrapper {
  padding-top: 10px;
  text-align: left;
  margin: 0px auto;
}
.mainbody {
  outline: #293135 solid;
  background-color: #444444;
  margin-top: 40px;
  text-align: left;
  padding: 20px;
  color: #FFFFFF;
  text-align: center;
  font-family: Arial, Helvetica, sans;
  font-size: 18px;  
}
<div class="mainbody" style="">
  <h1 style="text-decoration: underline">Download</h1>
  <p>Features Include:</p>
</div>

Upvotes: 1

Related Questions