How to make a div full width
new to this community and can't find if this question has been asked before
I'm using a theme where it's content is set to 1200px. The problem is I want to create a DIV that is full width to the screen's edge and then offset the margin-left to offset the difference. (I'm guessing this is the easiest way)
My question is how do I calculate the width of the column between the side of the screen to the left side of the 1200px grid? And then calculate that difference into the width of the DIV I'm trying to create so that the DIV is full width, regardless of what screen size it's being viewd on?
I'm aware I can do this with fancy editors like Visual Composer, but they are too clunky and make the site slower..
the following seems to work for text, but I can't get an image to stretch across the screen full width unless I make it larger and overlap the screen size. I need it to touch from screen side to screen side
`.blue_section {
width: 200% !important;
margin: 0px -50% 0px -50% !important;
padding: 0px 0px 0px 0px !important;
background-color: #0088CC;
}
.blue_content {
width: 1200px !important;
height: 100% !important;
margin: 0px auto 0px auto !important;
padding: 10px !important;
}`
Again, sorry if a question like this has been asked before.
Answer
If you want to make a div to the full width of the screen, then simply use this code:
div {
/* I added this just for fun */
background-color: skyblue;
color: white;
font-family: Century Gothic;
padding: 5px;
text-align: center;
/* The code that you need to copy */
position: absolute;
left: 0px;
right: 0px;
top: 0px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>Hello World!</div>
</body>
</html>