CODEWITHSUNDEEP
htmlcss
Gage Lovett
Gage Lovett

Reputation: 41

Centering Problems

Okay, so I just started a basic template for a website and I'm already running into an issue with centering.

I have a big box that I want to cover MOST of the website with a little room on every side, and I just want it to hang centered in the website.

Problem is, I set the position to relative and the thing disappears, I set it to absolute and the thing shows up but isn't centered of course. I'm just wondering why the box disappears when I'm setting it to relative, when it should be relative to the body.

Here's all the code, it's not much as I'm just starting this template

HTML:

<div class="bigbox">

</div>

CSS:

* {
    margin: 0px;
    padding: 0px;
}

body{
    background-color:#212121;   
}

.bigbox{
    background-color:red;
    height:90%;
    width:90%;
    margin: 0 auto;
    position:relative;
    z-index:1;
    float:left;
}

Thanks for taking a look, I'm sure it's a retarded easy fix

Upvotes: 1

Views: 56

Answers (5)

Gremash
Gremash

Reputation: 8308

The following should give you what you are looking for. You can adjust the border by changing the html, body height percent and the .bigbox margins.

html, body {
  height: 98%;
}

body{
  background-color:#212121;

}


.bigbox{
  background-color:red;
  height: 100%;
  margin: 15px 5px;
  position: relative;
}
<div class="bigbox">

</div>

Upvotes: 0

Pratikshya
Pratikshya

Reputation: 202

First up add a width to the div. You could do it in any format px, %, vw etc.

div{
  width: 80%;
  margin: 0 auto;
}

Upvotes: 0

Arthur Camara
Arthur Camara

Reputation: 313

You can achieve what you want in various ways:

vertical height (vh unit): https://jsfiddle.net/arthurcamara/bjhrz9n9/

*
{
    margin: 0px;
    padding: 0px;
}

body{
    background-color:#212121;

}

.bigbox{
    background-color:red;
    height:90vh;
    width:90%;
    margin: 5vh auto;
}
<div class="bigbox"></div>

absolute positioniong: https://jsfiddle.net/arthurcamara/bjhrz9n9/1/

body{
    background-color:#212121;

}

.bigbox{
    background-color:red;
    position: absolute;
    top: 5%;
    right: 5%;
    left: 5%;
    bottom: 5%;
}
<div class="bigbox"></div>

and my favorite flexbox: https://jsfiddle.net/arthurcamara/bjhrz9n9/2/

body{
  margin: 0px;
  padding: 0px;
  height: 100vh;
  background-color:#212121;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.bigbox{
    background-color:red;
    width: 90%;
    height: 90%;
}
<div class="bigbox"></div>

Upvotes: 5

Arnold Stoba
Arnold Stoba

Reputation: 343

I guess your problem is the percentage height in combination of an unknown height of the body. You should add a height to the body like in the following example:

html, body {
    height: 100%;
}

Working JFiddle

Upvotes: 3

Felix G.
Felix G.

Reputation: 6691

The problem occurs, because the box has no fixed height. So you need to set the height for body and html to 100%

* {
  margin: 0px;
  padding: 0px;
}
html {
  height: 100%;
}
body {
  background-color: #212121;
  height: 100%;
}
.bigbox {
  background-color: red;
  height: 90%;
  width: 90%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  float: left;
}
<div class="bigbox">

</div>

Upvotes: 1

Related Questions