novicenate Posted June 18, 2007 Share Posted June 18, 2007 I'm not sure how to explain this, but here goes. I have a menu (200px wide) and an info section (500px wide) that will go within the page main content (700px wide) that will be centered to the page whether it's viewed at 800x600, 1024x768, etc. I want the menu and the info section to be at the same distance from the top, but with the menu to the left and the info section to the right within the page main content. What is the right code to accomplish this - if it can even be done? Thanks so much!! Link to comment Share on other sites More sharing options...
Jamess Posted June 18, 2007 Share Posted June 18, 2007 I'm not sure how to explain this, but here goes. I have a menu (200px wide) and an info section (500px wide) that will go within the page main content (700px wide) that will be centered to the page whether it's viewed at 800x600, 1024x768, etc. I want the menu and the info section to be at the same distance from the top, but with the menu to the left and the info section to the right within the page main content. What is the right code to accomplish this - if it can even be done? Thanks so much!!This can be done through position: absolute; or through float, googling either will bring up some handy tuts Link to comment Share on other sites More sharing options...
yoshida Posted June 18, 2007 Share Posted June 18, 2007 Here's a pointer: nested divs are positioned by setting a margin. The margin is relative to the edge of the host div.Within the host div, I'd specify 'position: relative;' and 'float: left;' for the div you want to have on the left side of your screen.However, this may behave completely different in different browsers (IE7 - Firefox). The best way to do this is find a bunch of tutorials, and test 'till you drop. (don't get bothered by a one or two pixel style difference, this is common and fairly acceptable, and commonly occur when you use padding)Make sure to browse the W3 tutorials before you do anything else. Link to comment Share on other sites More sharing options...
novicenate Posted June 18, 2007 Author Share Posted June 18, 2007 thank you, I will look into it and see what I can find. Link to comment Share on other sites More sharing options...
smartalco Posted June 18, 2007 Share Posted June 18, 2007 <html><head><style type="text/css">div#main { width:700px}div#nav { width:200px;}div#body { width:500px; margin-left:200px} /*or*/ div#body { width:500px; position:absolute; left:200px; top:0px}</style></head><body><div id="main"><div id="nav">content</div><div id="body">more content</div></body></html> this is just off the top of my head, should work though Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.