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; }
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
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.