Question 42545 in Html Question posted in
Some basic documentation can be found here.

Div is under/outside of parent div? – Html

I have a container div which is the header. Inside the header is the logo and navigation. My logo and navigation divs are children of the header container. The logo is inside of the header, while the navigation text is not in the top right, but outside of the container.

body {
  margin: 0;
  background-color: red;
}
.header {
  width: 100%;
  background-color: black;
  height: 70px;
}
.logo {
  color: white;
  padding: 10px 5px;
  font-size: 10px;
}
.nav {
  color: white;
}
<div class="header">
  <div class="logo">
    <h1>New York</h1>
  </div>
  <div class="nav">
    <h1>Hey</h1>
  </div>
</div>
Tags:

2

Answers


  1. 0

    I think add float: right to the .nav class

    Login or Signup to reply.
  2. 0

    Add display: flex to .header css class:

    body{
        margin:0;
        background-color:red;
    }
    
    .header{
        width:100%;
        background-color:black;
        height:70px;
        display: flex;
    }
    .logo{
        color:white;
        padding: 10px 5px;
        font-size:10px;
        background-color: blue;
    }
    
    
    .nav{
        color:white;
        background-color: green;
    }
    <html>
    <head>
        
    </head>
    <body>
        <div class="header">
            <div class="logo">
                <h1>New York</h1>
                
                
                
            </div>
            
            <div class="nav">
                <h1>Hey</h1>
            </div>
        </div>
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search