Html - How to right align a div element

RUMBIDZAIMUKUNGUNUGWA
August 26, 2024
184 views
1 vote
2 Answers

I am trying to place a hamburger menu on the right of my page.

I just managed to put it on the same line as the header but there is no desired gap between the elements.

What I did:

margin-left:auto;    
margin-right:0px;

does not do anything. If I float the element right it jumps to the next line whereas I want the two elements on the same line

    #drop_menu{
        display:inline-block;
        float: right;
    }

Here is the full code:

I also tried:

#title_and_menu{
    position:relative;
    }

#drop_menu{
    display:inline-block;
    right: 200px;
    /*float: right;*/
}

#drop_menu {
  display: inline-block;
  /*float: right;*/
}

#hamburger_menu {
  width: 35px;
  height: 1px;
  background-color: black;
  margin: 6px 0;
}

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: inline-block;
}

#myHeader {
  display: inline-block;
  background-color: white;
  color: black;
  text-align: left;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-right: 25px;
}

#myHeader:hover {
  background-color: black;
  color: white;
}

body {
  padding-top: 25px;
  padding-botttom: 25px;
  padding-left: 25px;
  padding-right: 25px;
}

<div id="title_and_menu">
  <div id="myHeader">
    <h1>9.</h1>
  </div>
  <div id="drop_menu">
    <div id="hamburger_menu"></div>
    <div id="hamburger_menu"></div>
    <div id="hamburger_menu"></div>
  </div>
</div>
<img src="home_image.jpg" alt="home image">

Adding the following code:

#title_and_menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Makes the top bar of the hamburger menu twice as thick as the two bottom ones:
temporal solution

Tags: css html

Answers

You can use flexbox on #title_and_menu, with justify-content: space-between; for the left/right distribution and align-items: center; for the vertical centering of both:

#drop_menu {
  display: inline-block;
  /*float: right;*/
}

.hamburger_menu {
  width: 35px;
  height: 1px;
  background-color: black;
  margin: 6px 0;
}

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: inline-block;
}

#myHeader {
  display: inline-block;
  background-color: white;
  color: black;
  text-align: left;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-right: 25px;
}

#myHeader:hover {
  background-color: black;
  color: white;
}

body {
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-right: 25px;
}

#title_and_menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div id="title_and_menu">
  <div id="myHeader">
    <h1>9.</h1>
  </div>
  <div id="drop_menu">
    <div class="hamburger_menu"></div>
    <div class="hamburger_menu"></div>
    <div class="hamburger_menu"></div>
  </div>
</div>
<img src="home_image.jpg" alt="home image">

Above solution might actually solve the issue, but if you like to try positioning, you may use position: absolute; to the hamburger menu, you can place it on the right side of the page while keeping the header aligned to the left.

#title_and_menu {
  position: relative;
}

#myHeader {
  display: inline-block;
  background-color: white;
  color: black;
  text-align: left;
  padding: 25px;
}

#drop_menu {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  cursor: pointer;
}

#hamburger_menu {
  width: 35px;
  height: 3px;
  background-color: black;
  margin: 6px 0;
}

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: inline-block;
}

#myHeader:hover {
  background-color: black;
  color: white;
}

body {
  padding: 25px;
}

<div id="title_and_menu">
  <div id="myHeader">
    <h1>9.</h1>
  </div>
  <div id="drop_menu">
    <div id="hamburger_menu"></div>
    <div id="hamburger_menu"></div>
    <div id="hamburger_menu"></div>
  </div>
</div>
<img src="home_image.jpg" alt="home image">

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to right align a div element

Answers