Jump to content


Photo

Positioning problem


  • Please log in to reply
2 replies to this topic

#1 Liquid Fire

Liquid Fire
  • Members
  • PipPipPip
  • Advanced Member
  • 806 posts

Posted 10 August 2006 - 11:33 AM

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 

#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 10 August 2006 - 01:53 PM

For your secound question use floats rather than adsolute/relitive positioning. This 2 coloumn CSS Layout explains just that.

#3 Liquid Fire

Liquid Fire
  • Members
  • PipPipPip
  • Advanced Member
  • 806 posts

Posted 10 August 2006 - 05:00 PM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users