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:
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 position
s.
#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.