Jump to content

Archived

This topic is now archived and is closed to further replies.

Liquid Fire

Positioning problem

Recommended Posts

here is the html code for this problem:

<body>
<div id="header">
</div>
<div id="side_navigation">
Test side nav bar
</div>
<div id="main">
Welcome to the home of the kaizen digital project management system.  Please click on theproject links to see what we are currently working on.
</div>
<div id="footer">
</div>
</body>

now what i am trying to do here is to have the header on the top, will be load for a header.php later, and have the fotter on the bottom, will be loaded for footer.php late.  those work fine it is just the next 2 things that i am having trouble with.  now the main page is going to be as big as the content needed, not limited the height of it at all which brings me to my first problem which is the sode navigation. 

1. Is the a way top have it so the top is alway right below the header and the bottom is right above the footer?

my next problem is the position of the main div.

2. how do i get the main to be right next to the side navigation?

the only way i have been able to do it is but setting position to absolute and the left to the amount of px the side nav is.  the problem with the are is, if i want to change the side nav or something i need to change the left size to, that is not as big as the other problem.  The other problem is the instead of the page stoping at the right of the browser, is goes over and has the scroll bar from side to side, basically it is taking the amount of px left and add them to the rigth but i just want to basically remove the px so i don't overlap the sdie navigation bar.  any helpo on this or good link to good possition tutorials with css would be helpful 

Share this post


Link to post
Share on other sites
For your secound question use floats rather than adsolute/relitive positioning. This [url=http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/]2 coloumn CSS Layout[/url] explains just that.

Share this post


Link to post
Share on other sites
hey thanks, that is just what i was looking for.  its been awhile since i have used CSS last and now starting to get back into it for a project management system, thanks again.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.