CODEWITHSUNDEEP
htmlcss
user3605972
user3605972

Reputation: 11

How to make the title and navigation bar appear in same line?

I am new to coding. Sorry if my question is naive. I am trying to position site tile and navigation in the same line. I've tried using inline:block on title and navigation, it doesn't seem to work. What am I missing? Here is my code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
    color: #000;
    width: 800px;
    margin: 0 auto;
}

</style>
</head>

<body>
<div id="wrap">
  <div id="menu">
    <div class="default-heading">
      <h1>Resume</h1>
    </div>
    <div class="menu"> <a href="#">Home</a> <a href="#" >Education</a> <a href="#">Skills</a> <a href="#">Experience</a> <a href="#">Contact</a></div>
    </div>
  </div>

</div>
</body>
</html>

Upvotes: 1

Views: 6967

Answers (2)

Wh1T3h4Ck5
Wh1T3h4Ck5

Reputation: 8509

There are a lot of ways to do that. I personally prefer floating divs.

<div style="width:500px; background-color:#f5f5f5; border:solid 1px #cccccc; padding:5px;">
  <div style="float:left">My page title</div>
  <div style="float:right">Homepage | About | Contact</div>
  <div style="clear:both"></div>
</div>

preview:

enter image description here

This is just another option ;)

Upvotes: 1

Anindya Basu
Anindya Basu

Reputation: 659

.default-heading, .menu-container {
    display:inline-block;
}

adding this in your CSS will fix your problem.

Upvotes: 1

Related Questions