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..

    How do I get my textboxes to align properly once triggered? - jQuery/CSS

    How can change the style of
      tag in CSS

    How to make all divs same height, based on text content?

    How to make a 'ease out' on focus loss in CSS

    How to align a paragraph to center of cell in table

    how can I overcome existing css and change button style to the default windows style button?

    How to get the CSS width of a mobile device in ASP.NET MVC?

    Website Content Shown on Moz but not Chrome

    How to remove some css properties using regular expression?

    How do I center the twitter bootstrap tabs on the page?

    How to position an image list marker so that the text is vertically centered

    How to write HTML, CSS and Javascript all together in Joomla 2.5 article? [closed]

    How can I target a element inside h2

    How to reflect updates to CSS at runtime in Visual Studio 2012?

    How can I programmatically (in JavaScript) add “sub-divs” to divs?

    How to make a horizontal 2-colored strip in a tablecell?

    How can i Change the DOt in a JavaFx RadioButton?

    How to use Materialize css Tabs in Meteor?

    How do I make my mobile website auto-adjust its screen resolution?

    How to parse a specific link using a Selector CSS Query

    How to align the navigation menu in wordpress?

    How to change height of ui-grid row?

    How to get CSS background property to work with toggleClass() in jQuery?

    How to disable CSS Class on particular DIV

    How to use GitHub's primer and octicons?

    How to print data from left to right in html using css

    How to prevent opening multiple popup windows?

    How do I get one element to respond to the click of another element? - CSS/jQuery

    How do I get these elements to effectively center properly and responsively?

    How to change tr color on mouse over when there is already implemented?