'Struggling to make a simple box

I'm new to webdev using html/css. Starting to learn, and I want to create a really simple thing.

Basically a responsive fixed box that never touches the viewport by 20px.

If you change the screen size, the box will always have a 20px margin, top, sides and bottom. I don't want scrolling at all! Then at the center, I want to place a .gif that is about 40em that scales according to screen size.

My problems until now, is that I can't make that box at all, I've tried dozens and dozens of different solutions I've lost track of which ones, I've got 30 tabs opened with tutorials but none solve my problem.

Every try there is always a scrollbar, or the box has margins on top/left, but not bottom/right, or the gif is centered horizontally but not vertically, or there are margins but I can't control size of them....

Is this so hard? It would be awesome to have some directions, thank you!

This is what I currently have, but it's just one of the dozens of my failed attempts. (i didn't include the .gif)

body {
  background: #f0e8e6;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

div {
  width: 90vw;
  height: 90vh;
  padding-top: 100px;
  padding-bottom: 100px;
  padding-left: 100px;
  padding-right: 100px;
  position: center;
  top: 50%;
  left: 50%;
  background: #ffffff;
  text-align: center;
  overflow: hidden;
}
<div>

</div>

enter image description here

htmlcss


Solution 1:[1]

This is a little bit of an odd way to go about it, but honestly I really enjoy this method as it has very easy to understand logic behind it. Apply the margin to the parent element via padding, not the child element.

body {
  background: #f0e8e6;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

div {
  width: 100%;
  height: 100%;
  background: #ffffff;
  text-align: center;
  overflow: hidden;
}

Firstly, you need to remove the default padding/margin inbuilt into the body. Once you do that, you add the padding to the body - this gives the 20px margin. Finally, you need to ensure that the body spans the width of the page, and the div spans the width of the body. This is achieved by their respective width/height properties.

A key property here is box-sizing. This honestly should be the default, but essentially it stops the container from growing when adding padding. If this wasn't here, the body will overflow the page.

To add the image in the center, you should be using flex. It's quite a big topic, but it works perfectly for these situations. Learn more about flex here, but for now below in an example. Note the align-items and justify-content properties, these are what align the image vertically and horizontally.

body {
  background: #f0e8e6;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
}

div {
  width: 100%;
  height: 100%;
  background: #ffffff;
  text-align: center;
  overflow: hidden;
  
  display: flex;
  align-items: center;
  justify-content: center;
}
<!doctype html>

<html>
<head>
  <meta charset="utf-8">
  <title>loiz</title>
  <link rel="stylesheet" type="text/css" href="styling.css" media=”screen” />
</head>

<body>
  <div>
    <img src="https://via.placeholder.com/150C/O"/>
  </div>
</body>

</html>

Note that the top and left css attributes only apply to elements with absolute or fixed positioning (see here).

Also, position: center is not a valid value. Check here for valid values.

Solution 2:[2]

you have to use media queries for making it responsive for other devices , while provide a padding of 2% to the outermost div and then give and then place your gif in that div and provide that gif a padding also and you will get your required result

Solution 3:[3]

Here's an idea of how to accomplish this:

body {
  background: red;
  padding: 0;
  margin: 0;
  display: flex;
  height: 100vh;
}

div {
  width: calc(100vw - 40px);
  height: calc(100vh - 40px);
  background: #ffffff;
  overflow: hidden;
  margin: auto;
  display: flex;
}

img {
  width: 40vw;
  margin: auto;
}
<div>
  
  <img src="https://images.pexels.com/photos/10262654/pexels-photo-10262654.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
   
</div>

Solution 4:[4]

There are some default padding and margin on body tag. You need to reset them first. Also html tag is not full height by default as well. You also need to make them fullscreen by adding width: 100% and height: 100%

And then you can resize your div correctly. You can use calc method in css. In your case; width: calc(100% - 240px) 240px is 200px padding (100px each) for both sides and 40px margin (20px each).

To center gif for you can use flex features rather than using text-align etc.

:root {
    --margin:  20px;
    --padding:  100px;
}
body, html {
    width:  100%;
    height: 100%;
    margin:  0;
    padding:  0;
}
body {
  background: #f0e8e6;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

div {
  width: calc(100% - (var(--margin) * 2) - (var(--padding) * 2));
  height: calc(100% - (var(--margin) * 2) - (var(--padding) * 2));
  padding:  var(--padding);
  background: #ffffff;
  overflow: hidden;
  position: relative;
  display:  flex;
  align-items: center; 
  justify-content: center;
  left: var(--margin);
  top:  var(--margin);
}
<div>
    <img src="https://media0.giphy.com/media/WXZ5DqIOhQrxtkcszN/giphy.gif?cid=ecf05e47yzd9cgsu3pzebujrmdl3od4erxhdtwozizzjx2nc&amp;rid=giphy.gif&amp;ct=g" alt="Hell Yeah Snl GIF by Saturday Night Live" style="width: 500px; height: 280px; ">
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 HIT POT
Solution 3 dantheman
Solution 4

Related Questions