Seriously, how do you guys work with divs?

1

Hello reader.

I’m at the part of the freeCodeCamp course where you have to make a tribute page. Trying to imitate the style of the example project, I decided to put all of the content into a centered div and make the background color grey. However, I’m unsure if the content is appearing in the div and it won’t center on the page. How do you guys work with these divs? What am I doing wrong? I feel like what I’m doing should work.

Here’s the html so far:

<!Doctype html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
  <link href="index.scss" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>

<body>
  <div id="GrayCube">
    
    <h1>Eduard Khil</h1>
    <img src="http://russia-ic.com/img/people/eduard_khil_000.jpg">
    
  </div>
</body>

</html>

And here’s the css stylesheet:

#GrayCube
{
  height: 1600px;
  background-color: grey;
  margin: auto;
}

#GrayCube h1
{
  font-family: Muli;
}
2

Block elements (like <div>s) take up 100% of their parents’ width. Try setting its width to something like 1000px.

3

You can do this:

#GrayCube
{
  /* width: 50%; */
  /* width: 300px; */
}

You need to understand that <div> is a block-level element. That means, it will cover the entire width of its parent element. Here, its parent element is <body> and since you have not explicitly defined the width of the <body>, it defaults to the width of the browsing window.

There are a few things that you should take a note of.

  1. Follow the best practice and define your doctype as below:
<!DOCTYPE html>

It’s the recommended way prescribed by the W3C.

  1. You have linked a Sass file to your HTML document in the <head> tag. Browsers can’t parse Sass files as of yet. Remove that code and link to a CSS file.

  2. The convention used in HTML to define classes or ids is kebab case. So change your “GrayCube” to “gray-cube”. Moreover, classes and ids are defined based on their functionality in the page, not on what styles they are gonna have. “wrapper” or “container” would have been an apt name.