CODEWITHSUNDEEP
htmlcss
Benard Manuh
Benard Manuh

Reputation: 107

How do I align two elements on the same line?

I would like for my 'Acme Web Design' header and navigation all to be on the same line?

I have tried to change the bottom margin for the navigation to make it position on the same line as my header but that doesn't seem to work.

Snippet of my HTML and CSS file:

header {
    background-color: #35424a;
    border-bottom: 2px solid #ff6600;
    color: white;
    padding-top: 30px;
    min-height: 70px;
}

nav {
float: right;
margin-bottom: 30px;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
}
<header>
    <div class="container">	
		<div id="top header">
			<h1>Acme Web Design</h1>
		</div>
		<nav>
			<a href="index.html">HOME</a>
			<a href="about.html">ABOUT</a>
			<a href="services.html">SERVICES</a>
		</nav>
	</div>
</header>

Here is how it looks like with my HTML and CSS file:

enter image description here

This is how I want it to look like:

enter image description here

Upvotes: 2

Views: 3399

Answers (4)

Arindam Sarkar
Arindam Sarkar

Reputation: 224

You can try it by using float. 

header {
    background-color: #35424a;
    border-bottom: 2px solid #ff6600;
    color: white;
    min-height: 70px;  
    line-height: 70px;
}

nav {
width: auto;
float: right;
margin-bottom: 30px;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
}
#topheader{
  width: auto;
  float: left;
}
#topheader h1{
  margin: 0;
}
<header>
    <div class="container">	
		<div id="topheader">
			<h1>Acme Web Design</h1>
		</div>
		<nav>
			<a href="index.html">HOME</a>
			<a href="about.html">ABOUT</a>
			<a href="services.html">SERVICES</a>
		</nav>
	</div>
</header>

Upvotes: 0

Akc52
Akc52

Reputation: 21

Have you heard of flexbox? It's a great option for alignment issues like this.

.container {
    background-color: #35424a;
    border-bottom: 2px solid #ff6600;
    color: white;
    padding: 0 30px;
    min-height: 70px;

    /* 
      add 'display: flex' 
      (and any additional flex properties) 
      to the containing element
    */

    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: no-wrap;
    justify-content: space-between;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0 10px;
}
<header>
    <div class="container">	
		<div id="top header">
			<h1>Acme Web Design</h1>
		</div>
		<nav>
			<a href="index.html">HOME</a>
			<a href="about.html">ABOUT</a>
			<a href="services.html">SERVICES</a>
		</nav>
	</div>
</header>

Here's a fun tutorial to learn more: https://flexboxfroggy.com/

Upvotes: 2

Vikas Gupta
Vikas Gupta

Reputation: 1233

You need to provide margin-top instead of margin-bottom for nav class. Following is the link to JSbin

 header {
            background-color: #35424a;
            border-bottom: 2px solid #ff6600;
            color: white;
            padding-top: 30px;
            min-height: 70px;
          
        }
    header h1 {
            float:left;
        }
    
        nav {
          float:right;
          margin-top:5%
        }
    
        nav a {
            color: white;
            text-decoration: none;
            padding: 10px;
        }
    <header>
        <div class="container">	
    		<span id="top header">
    			<h1>Acme Web Design</h1>
    		</span>
    		<nav>
    			<a href="index.html">HOME</a>
    			<a href="about.html">ABOUT</a>
    			<a href="services.html">SERVICES</a>
    		</nav>
    	</div>
    </header>

Upvotes: 0

Johannes
Johannes

Reputation: 67738

The easiest way is to use flexbox on the container DIV, with the following settings:

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

BTW: You have two IDs on your 'top header' element - one is definitely enough....

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

header {
  background-color: #35424a;
  border-bottom: 2px solid #ff6600;
  color: white;
  padding-top: 30px;
  min-height: 70px;
}

nav {
  margin-bottom: 30px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 10px;
}
<header>
  <div class="container">
    <div id="top header">
      <h1>Acme Web Design</h1>
    </div>
    <nav>
      <a href="index.html">HOME</a>
      <a href="about.html">ABOUT</a>
      <a href="services.html">SERVICES</a>
    </nav>
  </div>
</header>

Upvotes: 2

Related Questions