Jump to content

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


hchron28
 Share

Recommended Posts

<!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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...