two divs on each side on the same line - html

Question

How can I make it stay on the same line? I want "How ya doin?" to be on the same line as the menu.
<div class="header">
<b>How ya doin?</b>
<ul class="menu">
<li>Home</li>
<li>Registration</li>
<li>Terms of Use</li>
<li>Support</li>
</ul>
</div>
THe CSS:
* { margin: 0; padding: 0; }
.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}
.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}
.menu li {
display: inline;
margin-right: 8px;
}
This is what I get:

Answer 1

I'd give the b and the ul both a width, say 50% for making it easy, then float one right and one left.
You'll need a div to clear it afterwards to fix the layout though.
Something like:
.header b {
width:50%;
float:left;
}
.header ul {
width:50%;
float:right;
}
then underneath
<div style="clear:both"></div>
to avoid messing things up.

Answer 2

Try
ul {
display:inline;
/* ... */
}

Answer 3

something like:
.header b{display:block; width: 100px; float:left}
.menu {width:150px; float:left}
Good luck

Answer 4

what about using absolute / relative positions?
this is really a simple and nice solution for header text, easy to add another elements as well
.header{
position: relative;
}
.header > b{
position: absolute;
left: 10px;
top: 5px;
}
.header > ul{
position: absolute;
top: 5px;
right: 10px;
}

Answer 5

<div class="header">
<!-- float to left -->
<b style="float: left;">How ya doin?</b>
<!-- float to right, or you can add float to .menu in css -->
<ul style="float: right;" class="menu">
<li>Home</li>
<li>Registration</li>
<li>Terms of Use</li>
<li>Support</li>
</ul>
<!-- clearing float -->
<br style="clear:both;" />
</div>

Answer 6

I changed your CSS to this and it seemed to do the trick (additions noted):
* { margin: 0; padding: 0; }
.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
float:left; /* ADDED */
width:100%; /* ADDED */
}
b {
float:left; /* ADDED */
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}
.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}
.menu li {
display: inline;
margin-right: 8px;
}

Answer 7

The ul is a block element, so by default it starts on a new line, taking 100% of the available width. You need to tell it to behave differently.
Easiest should be to set display: inline; on the ul element.
Another is to set float: left; on both the <b> and the <ul>, and give them both a width.
If you take the latter (float) approach, you'll need to tell .header to contain the floats. Easiest way to do that is height: 1%; overflow: hidden;.