How to make a div full width

Question

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)

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 viewed 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;
}

https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/ — CBroe, Jun 14 '17 at 16:59
why dont you just use bootstrap? Bootstrap will make all of this much easier, make your page more size-change responsive too and its pretty easy to implement. Its made by twitter. — Omkar, Feb 04 '19 at 04:23
https://stackoverflow.com/questions/1260122/expand-a-div-to-fill-the-remaining-width — TylerH, Sep 15 '22 at 14:37
Divs take up full width by default. You don't need any styles to achieve this. — TylerH, Sep 15 '22 at 14:37

score 6 · Answer 1 · answered Feb 11 '21 at 13:57

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>

score 2 · Answer 2 · edited Sep 15 '22 at 14:23

Here is an example right from w3schools: https://www.w3schools.com/cssref/func_calc.asp

#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>
<div id="div1">Some text...</div>

techfly · Answer 3 · 2017-06-14T17:07:47.900

What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.

About calculating the width of the column: If it's not an issue, this is easily resolvable using Javascript.

var col = document.findElementById("id-of-your-column-div");
var screenFill = document.findViewById("screen-filler");

screenFill.style.marginLeft = col.clientWidth;

score 1 · Answer 4 · answered Jun 14 '17 at 17:03

1

Do you mean something like this?

<div style="width:1200px;right:0px; top:100px; height:200px;background-color:lightgray;">Hello</div>

answered Jun 14 '17 at 17:03

Jay Buckman

581
5
18

score -1 · Answer 5 · answered Jun 14 '17 at 17:13

-1

You can do:

  <style>
  .mydiv{
  width:1150px;
  margin: auto 0;
  }
 </style>

the width:1150px it for using 25px the margin on each side left and right

answered Jun 14 '17 at 17:13

Chukwu Remijius

323
1
14

but the margin between the 1200px grid is dynamic depending on the screen size. I never know the exact pixel width of the margin between the side of the screen and the side of the 1200px div – Liquid_Shane_O Jun 14 '17 at 17:46
What do you want to achieve? – Chukwu Remijius Jun 14 '17 at 17:51
.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: 100px 0% 100px 0% !important; /* 100% DIV OR GREATER W/O OVERFLOW INTO NEXT CONTAINER */ display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; } – Liquid_Shane_O Jun 14 '17 at 17:57

score -1 · Answer 6 · edited Mar 07 '22 at 16:17

-1

Just add css to your div and add following code -

div { 
   height: 100px;
   background-color: blue;
   margin -8px;
}

This should probably work.

You need to add negative margin because browsers usually tends to add some margins to the contents of its webpages.

edited Mar 07 '22 at 16:17

aaossa

3,763
2
21
34

answered Mar 07 '22 at 15:51

Aniruddh Karekar

1

How to make a div full width

6 Answers6