If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Join Date
    Oct 2002
    Member #
    How are you.

    I am currently working on a liquid layout at this site.

    After modifying the header images & their respective containers, the primary navigation bar would fall on top of the page content, in Internet Explorer, when the window was less than maximized.

    To correct this, I changed the CSS in .left_column and .right_column to position:relative (from absolute), and used a negative top position in .right_column to bring it into place.

    I am wondering if this is standard, and if you think it may cause problems.

    Most of all, if there is a better way to do it. It seems to work in IE and Firefox on my W2000 machine, but I want to check.

    Thanks for helping!


  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Maryland, US
    Member #
    21 times
    You can often change an element's position more predictably using margins (negative margins are legal: for example, a -1px top margin moves an element up one pixel by making it consume one less pixel in height in the document flow).

    position: relative; sometimes makes IE spaz out and change how it lays out the element entirely.
    filburt1, Web Design founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Member Taffu's Avatar
    Join Date
    Dec 2006
    Member #
    I can't see the page (dead link?) so my input might not be as useful as I intend for it to be.

    Depending on the layout and how you're building the columns (I'm imagining two colums, left being nav and right being content), I would suggest the following to avoid using negative values with relative positions. First, build your entire site into a div container with an ID like 'shell'...for instance:
    .shell {
    width: 100%;
    height: auto;
    display: table;}
    Using display: table; is helpful, IMHO, in avoiding a lot of browser compatibility issues between the two monsters (Firefox & IExplorer)...Firefox tends to handle div positioning and alignment values better when display:table; or display:block; is used (I simply prefer table).

    Then build your two colums like so:
    .leftcolumn {
    width: 25%; // This can be whatever you want, as long is this + right = 100%
    height: auto; // Again, this can vary...your shell is on auto as well
    display: table;
    float: left;}
    .rightcolumn {
    width: 75%;
    height: auto;
    display: table;
    float: left;}
    Don't bother using any positioning values, since using the float value will let your containers align based on their width values being 100%. Of course, your content is going to adjust based on the width of the browser & viewing users resolution, so be sure with static containers and images inside these divs to keep that in mind with aligning & positioning them. Also, careful with overflow, you'll probably want to throw an overflow: hidden; value in the right column to avoid any content breaking your page layout. Good luck!
    Owner - (in development)

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 05:55 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: