MDWeezer Posted April 26, 2007 Share Posted April 26, 2007 I'm looking to build a very simple layout in CSS but I'm needing help. I need the following: Header - 25px height, 98% width Footer - 25px height, 98% width Navigation bar on the left - This width needs to be flexible. I have a tree view here, so when someone expands a node in the tree, I need the width to automatically adjust, as well as the height. Body - This is going to contain a 640x480 image. I would like this centered, just to look nice. This is for a internal project, I have a bunch of Perl and Java apps that generate charts... People will navigate the tree view and upon click on the different nodes, I'll be loading in a new 640x480 image (chart) with Prototype and a simple AJAX call. A variety of people will be using this, 98% using IE (corporation standard), however there will be a variety of resolutions. Another option too would to squeeze everything so it's centered in the page (float: middle?). The big thing is having the navigation bar on the left being able to automatically adjust its width and not effect the image in the body. It would be greatly appreciated if someone can whip up this, what seems to be very easy but I can't figure out, CSS layout . Thanks! Quote Link to comment Share on other sites More sharing options...
leap500 Posted June 7, 2007 Share Posted June 7, 2007 If you still need this: <html> <head> <style type="text/css"> #holder{ width:98%; min-width:800px; border-left:1px solid #000000; border-right:1px solid #000000; } #header, #footer{ height:25px; width:100%; border:1px solid #000000; border-left:none; border-right:none; } #menu{ width:150px; float:left; } #body{ width:800px; } #content{ float:left; border-left:1px solid #000000; } #footer{ clear:left; } </style> </head> <body> <div id="holder"> <div id="header">header</div> <div id="body"> <div id="menu"> Menu<br /> Menu<br /> Menu<br /> Menu<br /> Menu<br /> Menu<br /> </div> <div id="content"><img src="" width="640" height="480" /></div> </div> <div id="footer">footer</div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.