Sameer Moin
Sameer Moin

Reputation: 72

Layout Issue In HTML5

i want to align div from top please help me out how to fix this issue
my code is:

<!DOCTYPE html>
<html>
<head>
<style>
        body {
            margin:0;
            padding:0;
        }
        .topmenu {
            background-color:#808080;
            height:200px;
            width:600px;
        }
    </style>
</head>
<body>
<nav>
    <div class="topmenu">
    <h2>Hello</h2>
    </div>
</nav>
</body>
</html>

Check This Image

Upvotes: 1

Views: 56

Answers (6)

body {
    margin:0;
    padding:0;
}
.topmenu {
    background-color:#808080;
    height:200px;
    width:600px;
}
       
h2 {
    margin:0;
}
<nav>
    <div class="topmenu">
        <h2>Hello</h2>
    </div>
</nav>

Upvotes: 0

Tushar Shukla
Tushar Shukla

Reputation: 6605

Above answers are absolutely right. Just wanted to add that it is a good practice to use reset-css or normalize-css for handling default styling of your webpage. Using them can save you from many styling related hurdles.
As far as the answer is concerned
h2 {margin:0; padding:0} should work perfectly!

Upvotes: 0

Mislav Novalić
Mislav Novalić

Reputation: 57

.topmenu 
  {
    float:left;
    padding:5px;
  } 

Upvotes: 0

praveen
praveen

Reputation: 1375

you can try this also without adding other class

body 
{
    margin:0;
    padding:0;
}
.topmenu 
{
    background-color:#808080;
    height:200px;
    width:600px;
    margin-top: -19px;
}

Upvotes: 0

Alex Suleap
Alex Suleap

Reputation: 569

.topmenu{
    position:fixed;
    top:0;
}

Upvotes: 0

silviagreen
silviagreen

Reputation: 1729

 body {
            margin:0;
            padding:0;
        }
        .topmenu {
            background-color:#808080;
            height:200px;
            width:600px;
        }
        
        h2{
          margin:0;
          }
<nav>
    <div class="topmenu">
    <h2>Hello</h2>
    </div>
</nav>

With

   h2{
      margin: 0;
    }

Upvotes: 2

Related Questions