Ask coding questions

← Back to all posts
1
How do i make a rectangle in CSS to cover the width of the screen?
AzureScripts (130)

I want to have a rectangle to go from the left side of the screen, to the right side of the screen.

Commentshotnewtop
2
vedprad1 (435)

By rectangle, if you mean div, you should write this in your style sheet:

div {
  width: 100%;
}

Or, if you are making a rectangle in canvas, do this in js:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(0, 0, [Canvas Width], 100);
ctx.stroke();

If this answers your question, please check the checkmark on the left side of this message. Thanks and Good Luck!

1
heyitsmarcus (285)

@vedprad1 It is a tad more complicated than just width: 100% because percentage is relative to the container of the div and also unless the div has content (or a height specified), this CSS will do nothing on the page.

What you can do to ensure you see a rectangle, regardless of where the element is declared on the page, is to use the following CSS on an element such as a div:

div {
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  width: 100vw;
  background: dodgerblue;
}

The position fixed property will cause it to be a sticky rectangle that you can move around the screen with the top, bottom, left, and right properties. You must either have content inside the div itself or a height property for the rectangle to show up. Also, the vw unit is always relative to the viewport, so 100vw is the entire width of the window. Only use % if you know what you're doing; otherwise, you'll end up with strange behavior you weren't expecting.

Here's a repl of the behavior: https://repl.it/@heyitsmarcus/RectangleOnScreen

1
AzureScripts (130)

@heyitsmarcus Thanks for this. Maybe you could help me with another question?

How do i move a <p> so it is a bit more in the middle of the page?
You can see what i mean here

https://gyazo.com/7ef8cb6560a0c360200dff7dc3eaf517

1
heyitsmarcus (285)

@AzureScripts if you use CSS Grid, you can easily center text within any other container. First, apply a display: grid to the parent container (in this case the div element). Then, apply display: grid to the p element and use CSS like so:

p {
  display: grid;
  justify-self: center;
  align-self: center;

/* any other styles as well */
}

justify-self will horizontally align the element and align-self will vertically align the element. If you set those to center, it will position the p exactly in the center of the div.

Here's a jsfiddle of it in action: https://jsfiddle.net/b4v2apsy/1/