Jump to content

Positioning problem


Liquid Fire

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 
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.