How to place logo and nav in the same line with 100% width?

HTML & CSS
1

How to place logo and nav in the same line with 100% width?

<div id="top_header">
			<img id="logo "src="images/pic.png" />
			<nav id="navi">
				<ul>
					<li>Item</li>
					<li>Item</li>
					<li>Item</li>
					<li>Item</li>
					<li>Item</li>
					<li>Item</li>
				</ul>
			</nav>
		</div>

#logo{
	display:block;
	float:left;
	height:31px;
	width:81px;
}
#navi{
	width:400px;
}
#navi ul li{
	display: inline;
}
#navi li{
	padding:7px;
	display:inline-block;
	list-style:none;
}
2

To place the logo in line with the navigation you could just declare a float:left on the image. What do you mean “with 100% width?”

3

The reason it isn’t working the way you have it is syntax: <img id="logo "src=“images/pic.png” />

Change to <img id="logo" src=“images/pic.png” />

4

[font=“comic sans ms”]Both of those are good answers.

I’m only posting because I wanted to see the comic sans in my post too : )

*edit oh gawd this is lovely. I may post like this from now on[/font]

5

FUUUUUUUUUUUUUUU

6

You could also use negative margins instead of float, since images tend to be fixed size… I’d have to see what it is you are trying to do both for real content and actual image but it looks to me like you’re already thinking presentation before you even have your content marked up semantically… hence the presence of an IMG tag on what is quite likely NOT a content image.

Of course the wasteful and pointless HTML 5 asshattery and extra DIV for nothing probably isn’t helping matters either… since you’re basically using them to apply style that could just be put on the UL itself. (why I consider header, nav, content, section and all those new tags to be useless pointless idiotic rubbish setting coding practices BACK to 1998)

Off Topic:

@stomme – another reason I use a user.css; I’m seeing arial here.