two divs on each side on the same line

Answer 1

something like:

.header b{display:block; width: 100px; float:left}

.menu {width:150px; float:left}

Good luck

Answer 2

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 3

Try

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

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><a href="#">Home</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Support</a></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;.