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 make my elements occupy the width of their “max-width” specification?

    How to transform Menu icon to Arrow icon? [closed]

    How to include css and jquery in joomla component

    How to flip which side a progress bar begins at with CSS

    how to change style of element when click on anchor

    How to put border bottom only on last-child of dropdown menu

    How i change the dataTables_filter css class

    How to automatically choose which css to use depending on the URL/website and/or server I'm on?

    Mojolicious Tests: How to get the input value using css-selectors

    On scroll up use the animate() and show the div

    how to specify background text rectangle color in CSS

    OS X is messing with me css, how to fix

    How to dynamically reload a .css?

    How to include by default icon inside a textarea

    how to make the background the same as the div size in css

    How do I offset where my fixed nav bar takes me?

    How do I enable SASS line numbers in CSS output?

    How to centre my CSS menu?

    How do I change the overflow of a single element, while having the overflow of the body hidden?

    How to use CSS to select an element only if a specific element comes after the one you want to select?

    How to change the value depend on css animation?

    How to change CSS when it's ng-disabled?

    CSS: How to set image width larger than the container's [closed]

    jQuery, given a Variable with DIV with items, how to scroll an Item to the Left

    How to apply css logic [duplicate]

    How to display a div at the center of viewport?

    How do I use CSS to position a fixed variable height header and a scrollable content box?

    How to make a webpage look like a popup? [closed]

    HTML table show last column using media queries

    How do you make a button increase in size (125%) for few milliseconds and then return it original size on click?