How to inline elements with CSS


Tags: html,css

Problem :

I'm trying to make menubar at the top of my website. It should looke like this: enter image description here

The red square is my button.

My problem is that my headline and my button are not in the same line. So I tried to use a table but then there are both aligned to the left. After that I used float: right; for my button. It is now aligned right but in the next line.

How can I fix it so my button and my headline are in the same line and aligned like my picture.

HTML:

<div id="topbar">
   <h1>Fahrplan</h1>
   <button type="button" id="settings"></button>
</div>

CSS:

h1 {
  height: 44px;
  margin: 0;
  color:#FFFFFF;
  text-align: center;
  font-family: Helvetica, sans-serif;
  font-size: 16px; 
  line-height: 44px;
}
#topbar button {
  height: 20px;
  width: 20px;
  float: right;
}


Solution :

For this kind of scenarios, you might consider using positions.

#topbar {
  position: relative;
}

h1 {
  margin: 0;
  color:#FFFFFF;
  text-align: center;
  font-family: Helvetica, sans-serif;
  font-size: 16px; 
  line-height: 44px;
  background: #99f;
}
#topbar button {
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -10px;
}
<div id="topbar">
  <h1>Fahrplan</h1>
  <button type="button" id="settings"></button>
</div>

Here I have given position to both #topbar and the button. The #topbar has a relative position and button has an absolute position:

#topbar {
  position: relative;
}
button {
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -10px;
}

And I have also adjusted the button to be vertically centred by using the negative margin of half the height. Hope this helps.


    CSS Howto..

    My sidebar is fixed no matter what. How do I make scrolling possible with the sidebar?

    How to Get Element From Path Not Class or Id

    jQuery UI Droppable - How to allow only 1 element per drop zone, instead of stacking

    How to convert px from photoshop to css

    How do I center text in a span?

    How to make this Header/Content/Footer layout using CSS?

    How to move object into the screen from outside via jQuery transition

    How to remove Menu Item Class form secondary menu

    How to calculate the length in pixels of a string with php - from another page on my website

    How can I make the BODY element take up 100% height of the HTML element?

    How is BBC changing colours based on temperature? CSS?

    How to theorize about this phenomenon about
    tag

    How to check conditional in CSS?

    How can I make a similar shape to a parallelogram in css?

    Rails How to include a scss file in a specific erb view? [duplicate]

    How to build a CSS style with a LESS mixin parameter?

    How would I control the position of a drop down select menu?

    How to make some controls visible and overlapping a DIV when mouse hovers on it? [closed]

    How to override a link tag with another in css

    How to create a dropdown that is open by default and with custom scrollbars ( see pic from wireframes) in HTML [closed]

    How to make a webpage mobile friendly with css media queries

    How to avoid universal Rule CSS Asterisk(*)?

    How do you skew a div and keep the background image unskewed

    How to Achieve Word Wrap Effect With Children Divs

    How to remove the margin top from a div with display table-cell?

    how to deal with repeated letters in a javascript hangman game

    How can I fade in new HTML elements with CSS [duplicate]

    How do I minify CSS and Javascript? [duplicate]

    overlaying divs with onclick in slideshow -> onclick doesnt change

    How to adjust the length of input