CODEWITHSUNDEEP
htmlcss
temporary_user_name
temporary_user_name

Reputation: 37018

Why are my margins so messed up?

There is an odd problem here that I don't really understand.

I'm trying to just make the middle of the 3 vertical divs have another div inside it which has a black border and 10px of margin on all sides.

However, on the right side there is no visible margin, and on the bottom the div flows right out of the parent div and out of site into the footer.

What am I doing wrong? CSS for the middle div pair...

 #mainContent {
    height: 100%;
    width: 100%;
}

#platter {
    border: 1px solid black;
    margin: 10px;
    height: 100%;
    width: 100%;
}

http://jsfiddle.net/Lf7wuty0/1/

Upvotes: 0

Views: 113

Answers (2)

ritz078
ritz078

Reputation: 2337

Here's the correct solution : http://jsfiddle.net/5L4tnwtg/

The changes: Add: 

*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}

Modify:

#mainContent {
   height: 100%;
   width:100%;
   padding: 10px;
}

#platter {
   border: 1px solid black;
   height: 100%;
   width: 100%;
}

Upvotes: 0

Alexei Darmin
Alexei Darmin

Reputation: 2129

Solution: http://jsfiddle.net/efordek0/1/

Borders are applied outside of the element, therefore if your element is width:100%; with a border: 1px solid black;, the border will fall outside of your desired constraint.

Instead of applying a margin to the inner-div #platter, apply a padding to the outer div #mainContent. This way the 100% values will still apply but be subtracted by the 10px padding of the #mainContent and your borders remain inside the desired area.

Upvotes: 1

Related Questions