Header maintitle styling issue - html

Question

I am developing a website.
The site is in a very early state, and my problem is the header on the top of the page. I would like to have the Mainline "PersIntra" stand beside the little box with the "log out button" and not over it. I have tried to make this work with my css. I have tried nesting divs.
The header is getting too wide vertical. I want to make the headline text size bigger without the header itself needing to grow wider because of the text is not beside the logout box but over it.
Here is some links to tell you what I mean. (It is complicated to describe in text.)
Screenshot of header
The website is in Danish, but that shouldn't stop you from seeing my problem (screenshot..).
Here is the html:
<div id="header">
<h2> PersIntra </h2>
<div id="border">
Velkommen <?php echo $_SESSION['enummer']; ?> <br>
Du har 1 ny besked <br>
Log Ud <br>
</div>
</div>
</div>
Here is the css:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
#border {
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}

Answer 1

Try edit your css.
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
#header h2 {
margin-top:50px;
float:right;
margin-right:300px;
}
#border {
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}

Answer 2

There are lots of ways to do that kind of thing. One is to float the header to the left and display the header and login box inline, like so:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
}
h2 {
float: left;
display: inline;
width: 80%;
font-size: 2em;
}
#border {
display: inline;
width: 20%;
width: 150px;
padding: 5px;
border: 5px solid navy;
margin: 25px;
border-style: solid;
border-color: #eeeeee;
}
If you're trying to get something up and running quickly, you might consider using a css framework like bootstrap (http://getbootstrap.com/). If you're trying to learn css, I'd recommend pulling down the code for a framework like that and/or looking at the site for it with dev tools open, and explore what they're doing.
Hope that helps.

Answer 3

If you want to have text bigger or move around without affecting other content you could similar to this:
#header {
background-color:#66cc33;
color:white;
text-align:center;
padding:5px;
border: 10px solid;
border-radius: 25px;
position: relative;
}
#header h2 {
position: absolute;
top: 0;
left: 25px;
}

Answer 4

I would just add this to #border:
#border {
position: absolute;
bottom: 20px
left: 20px;
}
and add position: relative to the surrounding element:
#header {
position: relative;
}
Tha way #border will not take any space in the surrounding element and you can center-align you header without problems.