CSS <div> question, might belong in HTML sry if so...

hchron28 · February 6, 2016

<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="teststyle.css" />

</head>
<body>


<nav><section>
<div class="clear"></div>
</section></nav>




<div id="full"><section>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</section>
</div>
<div id="city"><section>
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>end</p>
</div>

<div id="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</section></div>
</body>
</html>

@charset "UTF-8";
/* CSS Document */

@media (min-width: 951px) {

body {
	margin: 0px auto;

}

nav {
     background: #1d1f21;
     position: fixed;
     top: 0;
     width: 100%;
     height: 80px;
     clear: left;
     overflow-y: hidden;
}

#full {
    position: initial;
    top: 80;
    width: 100%;
    height: 300px;
    background: red;
}

#city {
    position: initial;
    margin: auto;
    float: left;
    margin: 15px;
    padding: 15px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
}

My question is why does the div 'full' set to 80px down the page and it starts directly behind the nav div? If there is a better way to post I'm happy to do it, so far this has only been a resource first time asking a direct question.

Ingolme · February 6, 2016

In order to move it, the position has to be set to "absolute", "relative" or "fixed"

Also, you must specify units in CSS except when the value is 0, since 0 is the same for all units.

This rule won't work:
top: 80;

because you forgot to specify "px" as the unit.

dsonesuk · February 6, 2016

You should not be using position unless really necessary, and only IF the same result cannot be achieved using float: margins or padding.

Using position: fixed for nav is understandable, but not for the others.

The default styling is placed above media queries, only the styling that changes for specific device widths is placed within media queries.

hchron28 · February 7, 2016

Thanks, all that makes total sense.

Sign In

CSS <div> question, might belong in HTML sry if so...

Recommended Posts

hchron28

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

hchron28

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity