[Web4lib] Liquid Layout Problems

[Turner, Tiffany]

Hello,
 
I am a relatively new librarian and have been given responsibility for the library's website.  We decided to design a new home page, and I have almost finished with the project.  While my predecessor used tables in conjunction with CSS, I am attempting to use CSS exclusively (with the exception of the university's imposed banner).  Some of the page's features have been inherited from the university and cannot be changed.  However, my supervisors want the page to adjust when the users' browser windows are resized, and I have been unable to find a way to achieve this.  I have looked at what others have written about the subject and tried many techniques (e.g., using ems and playing with the margins and padding and using relative positioning) to no avail.  Currently, when the browser window is shrunk (especially when the right side of the browser is moved to the left) the four main content boxes in the middle of the page (i.e., Find, About the Library, Instruction, and Services for) overlap and the text becomes impossible to read.  Also, the My Library image/link at the top right of the page moves with the right side of the browser window.  The URL for the page is http://www.lib.utulsa.edu/testindex.htm <http://www.lib.utulsa.edu/testindex.htm>  and the CSS is http://www.lib.utulsa.edu/teststylish.css <http://www.lib.utulsa.edu/teststylish.css> .  The problem div boxes mentioned above are located at the end of the CSS page.  I would appreciate any help or comments about the page.  Thank you.

 

Tiffany Turner