Development CSS help needed

I'm trying to have three nested DIVs to come up on one line but it just won't work no matter what I do.
They keep aligning like this:
div A
--------------div B
div C

Any help highly appreciated. For some reason they just won't float left...?

Here's my html and css

HTML

Code:

<div id="wrapper">

<div id="topmenu">
	<div id="tmleft">1</div>
	<div id="tmcenter">2</div>
	<div id="tmright">3</div>
</div>

<div id="content"></div>
<div id="bottom"></div>

</div>

CSS

Code:

body {
text-align: center;
min-width: 900px;
background-color:#666666
}

#wrapper {
margin: 50px auto;
width: 900px;
text-align: left;
}

#topmenu {
width: 900px;
height: 29px;
background-color: #000000;
background-image: url(img/globaltop.jpg); 
background-repeat:no-repeat;
}

#content {
width: 900px;
height: 467px;
background-color: #000000;
background-image: url(img/globalcontent.jpg); 
background-repeat:no-repeat;
}

#bottom {
width: 900px;
height: 104px;
background-color: #000000;
background-image: url(img/globalbottom.jpg); 
background-repeat:no-repeat;
}

/* Topmenu area */
#topmenu #tmleft {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: left;
margin: 11px 0px 9px 10px;
width: 80px;
height: 29px;
float: left;

}

#topmenu #tmcenter {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin: 0px 0px 0px 0px;
width: 740px;
height: 29px;
text-align: center;
float: left;
}

#topmenu #tmright {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin: 0px 0px 0px 0px;
width: 80px;
height: 29px;
text-align: right;
float: left;
}

 

i think ur wrapper has a padding which you arent accounting for in your width for the topmenu

 

You're right!! Thanks man!
I've added the last of my css to the code in the first post.

Thanks for the help

 

Arghh no you weren't right... It was margin I had.. not padding...

I'll try stating padding: 0 and see if that helps....

This CSS really confuses me.

 

Not helping... Looking at the thing again it looks like this in FF:
-------------------2
1
-------3

I already spent 2 hours fiddling with it yesterday... If I can't get it to work I'll have to chop up the bg image I have in the "top" area and put each part into each box... I was hoping I could use divs alone and avoid tables....

 

im sure thats whats happening, make ur center 720px and it works.

also see this view of outlined divs, u can see theres no room for teh 3rd one.



also your div with 1 inside, has left margin which is pushing all the rest out to the right, make it zero like the rest

 

Code:

body {
background-color:#666666
}

#wrapper {
margin: 50px auto;
width: 900px;
}

#topmenu {
width: 900px;
height: 29px;
background-color: #000000;
background-image: url(img/globaltop.jpg); 
background-repeat:no-repeat;
margin:0px;
padding:0px;
}

#content {
width: 900px;
height: 467px;
background-color: #000000;
background-image: url(img/globalcontent.jpg); 
background-repeat:no-repeat;
}

#bottom {
width: 900px;
height: 104px;
background-color: #000000;
background-image: url(img/globalbottom.jpg); 
background-repeat:no-repeat;
}

/* Topmenu area */
#topmenu #tmleft {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin: 0px;
text-align: left;
width: 80px;
height: 29px;
float:left;
}

#topmenu #tmcenter {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin: 0px;
width: 740px;
height: 29px;
text-align: center;
float: left;
}

#topmenu #tmright {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin: 0px;
width: 80px;
height: 29px;
text-align: right;
float: left;
}

not sure what i changed but i took out some stuff from the body that you didn't need

works now

 

Awesome! I'm at it right now. Great illustrations mate. Thanks

 

Ohhh yeah! Booyaka! It was the body stuff that did it.

You're a hero Thanks

Here's my final CSS: (Yay!)

Code:

body {
background-color:#666666
}

#wrapper {
margin: 50px auto;
width: 900px;
padding: 0px;
}


/* Global styles */


/* Topmenu area */
#topmenu #tmleft {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: left;
/* margin: 11px 0px 9px 10px; */
width: 80px;
height: 29px;
float: left;

}

#topmenu #tmcenter {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin: 0px 0px 0px 0px;
width: 740px;
height: 29px;
text-align: center;
float: left;
}

#topmenu #tmright {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
margin: 0px 0px 0px 0px;
width: 80px;
height: 29px;
text-align: right;
float: left;
}

 

You just learned me the valuable lesson of setting background-color while building the CSS Very helpful tool lol.

 

get "firebug" for firefox and "web developer toolbar"

firebug lets you inspect any div and see a diagram of its padding/margin, as well as change CSS on the fly.

web developer toolbar lets you automatically outline any css tag, and do TONS of other stuff. I'd be helpless and lost without both of them.