HTML body margin 0 messing up div positioning - html

Question

I am a bite confused on what is happening here. I put my body margin set to 0 in my css and then all the div elements stretch across the screen like I want, but I want this to apply for only one. From a previous question: HTML Image going across entire screen
An answer said to use position:absolute and then change the position of the div elements. I used to have position:relative on these div elements and when I changed that to absolute, it combined all the div elements in one position. I tried moving them with bottom:then whatever pixels, but still did not move it at all. Would this be the way to move it? What would I do? On W3 schools: http://www.w3schools.com/css/css_positioning.asp
It tells me a lot about positioning div elements, but when I tried to use this it did not work on one div element I tried, but instead overlapped it.
How would I move these div elements?
Code CSS
#middle-4{
position:absolute;
left:0;
right:8;
bottom:0;
top:-800px;}
Code HTML
<div id="middle-4" style="background-image: url(images/Home/rock.png); height: 540px; width: 1348px; border: 1px solid black;"></div>
This is done so for as you can see up to 4 div elements.

Answer 1

If I understand your question correctly you want all element to conform to the default body margin except one element (or multiple elements using a class).
I would do it like this...
Give body a specific margin to ensure it is consistent across browsers.
Use negative horizontal margins to pull your element outside of the constraints of body
body {
margin: 8px;
background: lightGreen;
}
div {
background: lightBlue;
padding: 30px;
border-bottom: 1px solid blue;
}
.fullwidth {
margin-left: -8px;
margin-right: -8px;
}
<div>I'm constrained by body</div>
<div class="fullwidth">I'm full width</div>
<div>I'm constrained by body</div>

Answer 2

Setting margin on body only ensures cross-browser consistency as mentioned by uʍopǝpısdn
If you have 4 divs containing an image each, you should stick to position: relative - this will line up the divs / images vertically on top of each other.
Your issue might have to do with image sizes - if you want all images to keep their original size, you can keep their attributes for width and height as specified in your example "middle-4": height: 540px; width: 1348px;
However - do you want one div / image to stretch across the width of body / screen, you will have to apply the size in percentage - this can be done in 2 ways:
CSS3 - you have the options of "cover" or "contain", which can be applied to div as youre doing it now - example:
div {
background: url(images/Home/rock.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
CSS2 - you can apply a class to the image itself, and forget about the surrounding div - example:
<img src="images/Home/rock.png" class="img_width" />
.img_width {
width: 100%;
height: auto;
}